[CSS揭秘]边框内圆角

技巧：通过一个DIV标签实现边框内圆角效果

背景知识：box-shadow, outline, “多重边框”

补充说明：博客园的编辑器把我写的border-radius属性给删掉了，所以看到的页面效果里没有圆角。

实现效果：一个容器的边框或者描边的四个角，在内部是有圆角的，而在外部依然保持直角的形状。

实现思路一：通过两个DIV嵌套可以实现

.outer{

　　background: #655;

　　padding: 0.8rem;

}

.inner{

　　background: tan;

　　border-radius: 0.8rem;

　　padding: 1rem;

}

我有一个漂亮的内圆角边框

这种实现方式的思路很常规，但是能够应对复杂的设计要求。比如：外边框的颜色是渐变色或者图片时，可以非常灵活的进行修改。

实现思路二：描边outline不会跟着元素的圆角走，而box-shadow却会跟着元素的圆角走。将两者结合起来就会刚好利用box-shadow的特性来填充描边和容器圆角之间的间隙。

background: tan;

border-radius: 10px;

padding: 12px;

box-shadow: 0 0 0 5px #655;

outline: 5px #655 solid;

我也有一个漂亮的内圆角边框

tips: 未来的描边特性outline也许会变得跟box-shadow一样，也是跟随着圆角一起走。所以需要时刻关注CSS的最新动态哟。

技巧：box-shadow的spread-radius属性值可以直接取border-radius的一半，这样方便计算。