今天深入了解了一下css中背景与边框的知识。其中linear-gradient（线性渐变）、box-shadow与radial-gradient(径向渐变)在边框，背景的实现上起着不可忽视的作用。下面分点总结，归纳：
- 边框与背景的关系：
在如下情景中，我们想要为一个白色背景的图像加上一层白色的边框如下图二：
图一 图二
通常我们利用以下CSS代码实现功能：
border: 10px solid hsla(0,0%,100%,.5);
background: white;但是发现效果并不好，半透明白色边框没有出现，反而发现白色区域变大了就像上图一一样。原来是背景会延申到边框下部分，边框在上，两层是重叠的，如示意图三：
图三
半透明白色无法覆盖白色的背景，使得效果全无。我们需要将边框部分背景裁剪掉。加入裁剪背景的CSS代码：
background-clip: padding-box;让背景仅对齐内部padding区域，如图二的效果就实现了。
- 多重边框的实现：
在实际应用中，我们往往需要对一个区域叠加多重边框，如下图四：
图四
方法一：
可以看到图四中有一层虚线内边框，2层外边框。在常规CSS中仅仅提供一个border属性控制单个边框，对于多个边框的情况，我们就需要借助outline和box-shadow来实现。
box-shadow一般用于生成阴影,不太为人所知的是，它还接受第四个参数（称作“扩张半径”），通过指定正值或负值，可以让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线边，就像下图五。我们多次叠加，扩大这个实色阴影就可以生成多个模拟的外边框。
同时我们还可以在最后一层边框外再加一层投影，实现立体效果，如下图六。
图五 图六
利用CSS代码，可实现如上图效果：
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);方法二：
但是有时候我们可能只需要2层边框，或是需要内边框，我们就可以利用outline属性来进行描边：
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;效果如下图七：
图七
但是这个方案有需要注意的地方：它只适用于双层“边框”的场景，因为 outline 并不能接受用逗号分隔的多个值。如果我们需要获得更多层的边框，前一种方案就是我们唯一的选择。同时outline描出的边框是不会去拟合区域圆角的。
- 条纹背景的实现（linear-gradient的妙用）
在web实现的具体环境我们通常会有条纹背景的需求。
如下图八、图九：
图八 图九
而CSS本身并不提供类似的方法。我们只能利用其他属性来模拟类似效果。其中linear-gradient属性通过调整属性值就可以实现该效果：
如图八的CSS代码为：
width:20%;
height:100px;
margin-top: 20px;
margin-left: 450px;
background: linear-gradient(to right,#fb3 50%, #58a 50%);
background-size: 30px 100%;要想竖向地实现条纹，我们只需要旋转90度。如下：
background: linear-gradient(90deg,#fb3 50%, #58a 50%);同理如下的图十、图十一可以利用层叠实现：
图十 图十一
width:20%;
height:100px;
margin-top: 20px;
margin-left: 550px;
background-image: linear-gradient(
rgba(255,215,0,.5) 50%,transparent 0),
linear-gradient(90deg,
rgba(255,215,0,.5) 50%,transparent 0);
background-size:100% 30px, 30px 100%;