CSS绘制边框内圆角
作者：请叫我二狗哥
如上图所示效果，外部为直角、内部为圆角的边框视觉效果。由于
border-radius属性可以实现内部圆角，重点在于外部直角的视觉效果。
方案一、外部嵌套
欢迎来到二狗哥的cnblogs博客
.container{
background:hsl(30, 89%, 18%); padding:0.6em; font-size:16px; display:inline-block; }
.container > div { border-radius:0.6em; background:tan; width:300px; padding:0.8em; }
双重嵌套比较容易实现，需要使用两个元素。倘若只有单一元素能否实现呢？答案是肯定的，往往同样的效果有多种CSS解决方案。
方案二、box-shadow与outline结合
欢迎来到二狗哥的cnblogs博客
div {
margin:100px auto; font-size: 16px; border-radius: 0.6em; background: tan; width: 300px; padding: 0.8em;
box-shadow:0 0 0 .252em hsl(30, 89%, 18%); outline:0.6em solid hsl(30, 89%, 18%) ; }
由于outline形成的轮廓边缘是矩形，并不是完全随着元素边框边缘进行，故而可以作为外部直角轮廓的实现效果。
div.test{
margin:100px auto; width:300px; height:200px; background:tan;
border-radius:0.6em;
outline:0.6em solid hsl(30, 89%, 18%);
}
可以看到使用outline属性后，圆角与outline轮廓中出现了未覆盖的白底色，需要通过box-shadow来进行覆盖。那么盒阴影的扩展距离范围x是多少呢？可以构建数学模型基于初中的毕达哥拉斯定理来求出其值范围。
很明显，盒阴影的扩展距离需要小于描边（ outline）宽度，即x<0.6em。 我们再对边框角的最小值构建数学模型：
设边框半径的值为r，那么阴影的扩展距离最小值为AE=AO-EO=AO-r 根据毕达哥拉斯定理有： AO=√??2+??2=√2 ??
那么有：
AE=（√2 ?1 ）??≈0.42r（此处取两位有效小数，并向上取值） 代入数值计算 0.42x0.6=0.252 所以阴影扩展距离取值范围为 0.252em<=x<=0.6em
但是考虑到不同浏览器对于最终计算小数数值像素的处理兼容性问题，一般不建议取区间尾端点值（起始端点值由于是经过向上取值的，并非数学模型中的理论区间起始值）。
CSS绘制边框内圆角
