[CSS揭秘]边框内圆角
技巧：通过一个DIV标签实现边框内圆角效果
背景知识：box-shadow, outline, “多重边框”
背景知识讲解
1. box-shadow
box-shadow以逗号分隔列表来描述一个或多个阴影效果，几乎可以用在任何元素上(英文all elements. it also applies to ::first-letter)。如果元素同时设置了border-radius，那么阴影也会有圆角效果(实现本文要求的边框内圆角就靠这个特性)。多个阴影的z-ordering和多个text-shadow的规则是一样的(第一个阴影在最上面)。该属性没有继承性，没有初始值。
语法：
none | [inset? && [<offset-x><offset-y><blur-radius>?<spread-radius>?<color>?]]#
inset 默认阴影在边框外。如果实现内边框阴影，需要使用inset。 这里涉及到一个层级问题：最底层的是背景，接着是阴影，最上面是内容区域。
offset-x offset-y 分别设置水平偏移量和垂直偏移量。如果两者都是0，只要设置了blur-radius或者spread-radius，那么阴影就会位于元素后面且有模糊效果
blur-radius 模糊半径 可选参数，只能设置正值。 值越大，阴影边缘就越模糊。 设置为0表示阴影不具有模糊效果。
spread-radius 扩展半径 可选参数，半径为正则阴影延展扩大， 半径为负则阴影缩小。
color 这里有个小技巧, border-color和box-shadow的color值都是继承自元素的color值
案例讲解
实现效果：一个容器的边框或者描边的四个角，在内部是有圆角的，而在外部依然保持直角的形状。
实现思路一：通过两个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的一半，这样方便计算。
常见border-radius加box-shadow的案例
border-radius: 50%;
box-shadow: inset 3px 3px 9px black;
附上参考网页
http://elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html
https://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
