本文为大家分享了CSS边框特效实现技巧，供大家参考，具体内容如下
一、半透明的边框实现
加入我们有这样一个需求：在一个背景图片的区域中，定义一个带有半透明白色边框的白色div。这个的实现方法最先想到的就是可以为边框定义透明度，代码如下：
这里hsla为一种定义颜色的方法，它的各个参数含义如下：
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间
在浏览器中运行上述的样式设定，发现其实并没有出现我们想要的结果。div还只是一个没有任何边框效果的纯白色div。
这个问题出现的原因是：白色的div挡住了半透明的白色边框。因为如果为一个div设定为白色，那么这个div的盒子模型整个颜色都是白色的。如果设定了半透明的白色边框，放到这个白色的div中是显示不出来的(被div的白色衬托的没有办法显示出边框)。
要想解决这个问题，需要用到CSS3中的新属性——background-clip。background-clip规定了背景的绘制区域：
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
默认情况下，background-clip的值为border-clip，也就是说整个和模型都应用定义的背景，在我们上面的例子中也就是整个div一直到边框外围都是白色。所以如果我们将background-clip属性值设定为padding-box，即可将外部的边框不填充颜色，就能显示出设定的半透明边框了，代码如下：
这样设定的样式在浏览器中重新运行，就会出现预想的白色半透明边框效果了。
二、多重边框
有的时候为了元素的特别效果，可能需要为元素添加多重的边框，下面介绍两种添加多重边框的方法。
新闻热点
疑难解答
