标签：需要 元素 产生 演示 pread 调整 距离 绘制 border
我的github地址：https://github.com/FannieGirl/ifannie/
源码都在这上面哦！
喜欢的给我一个星吧
问题：我们通常希望在css代码层面以更灵活的方式来调整边框样式
目前为止，我们大多数人可能已经用过（或者滥用过）box-shadow来生成投影，不太为人之的是，它还接受四个参数（扩张半径），通过制定正值或负值，可以让投影面积加大或者减小,
知识背景：box-shadow 属性向框添加一个或多个阴影。
提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！
注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
创建多重边框，代码如下
效果图：
实例演示地址：https://jsfiddle.net/Fannie/06sjmL6n/5/
在某种情况下，你可能只需要两层边框，那就可以设置一层常规边框，再加上outline（描边） 属性来产生外层的边框，这种方法的优点是边框的样式十分灵活，不像上面的box-shadow方案 模拟实线边框（假设我们需要的产生虚线边框效果，box-shadow 就不可做到）
知识背景：outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，也不一定是矩形。
outline-color 规定边框的颜色。
outline-style 规定边框的样式。
outline-width 规定边框的宽度。
inherit 规定应该从父元素继承 outline 属性的设置。
创建多重边框，代码如下
效果对比图
实例演示地址：https://jsfiddle.net/Fannie/06sjmL6n/6/
还想说一点的是改变outline-offset值，可以实现很简单的缝边效果
是不是很奇妙！（就我这个智障这样想吧！），我想说的是多去思考，多去尝试，一切皆有可能啊！
这种outline方案，只适合双层边框的场景，outline不接受用逗号分隔多个值，边框不一定会贴合border-radius 属性产生的圆角，因此如果元素是圆角，它的描边可能是直角的。在绝大多数的情况下，描边都是矩形的。
后言：
如果你对基础的知识点已经很熟悉，你可以自动跳过。写上去的原因是查漏补缺，巩固一下基础。
如果有不对的地方，欢迎你来吐槽。
本文主要参考《CSS 揭秘》一书 以及w3school；
参考链接 ：http://www.w3school.com.cn/cssref/pr_background-clip.asp
标签：需要 元素 产生 演示 pread 调整 距离 绘制 border
原文地址：http://www.cnblogs.com/ifannie/p/6420985.html
