标签：也有 没有 图片 思路 计算 ext 方便 边框 back
技巧：通过一个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的一半，这样方便计算。
标签：也有 没有 图片 思路 计算 ext 方便 边框 back
原文地址：http://www.cnblogs.com/joyjoe/p/6111936.html
