inner-rounding.md

边框内圆角

?> 背景知识：:point_right: box-shadow, outline

我们知道box-shadow是会紧贴border-radius圆角边的，但是，描边outline并不会与圆角边border-radius贴合，我们可以将两者组合，通过box-shadow去填补描边outline所产生的间隙来达到我们想要的效果。

!>关于扩张半径的取值？假设圆角border-radius的半径为r,根据勾股定理，扩张半径的最小值应等于(√2−1)r ~= 3.314，最大值不能超过描边宽度，即6px。

<script v-pre type="text/x-template" id="inner-rounding"> <style> main{ width: 100%; padding: 60px 80px 80px; } div{ width: 209px; margin: 29px auto; padding: 8px 16px; border-radius: 8px; background: #f4f0ea; outline: 6px solid #b4a078; } input{ margin-left: calc(50% - 45px); } input:checked ~ div{ box-shadow: 0 0 0 5px #b4a078; } </style> box-shadow

A paragraph of filler text. La la la de dah de dah de dah de la.

<script> </script> </script>

浏览器支持

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-boxshadow&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>