边框内圆角
?> 背景知识：
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>
