[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;

border-radius: 50%; box-shadow: inset 3px 3px 9px #000;

附上参考网页

http://elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html

https://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/