怎么给边框添加图片 css3,用CSS3轻松实现图片边框

这是CSS3的又一重大突破。早在CSS诞生之前，我们就可以通过background属性为元素设置背景图片填充，但就迟迟不支持到边框上。那么，要用图片填充边框的话，大家就想到了一个很巧妙的方法——两个元素相互重叠或者嵌套，然后叠在上面的或者内层的元素尺寸小点，外层填充背景图片，然后内层用纯色盖一下，就得到一个图片填充的边框了。

实现到html上，就是如下代码:

效果如下图所示

然后我们给in-border设置一下白色背景。

边框背景就出来了

为了这么一个小功能搞两层嵌套，网页复杂了必然会为页面增加不少负担。所以，CSS3为民请命，优雅地解决了这一问题。

这时候你就会发现，不用嵌套，也能做出图片填充的边框来。

效果如下图所示

实际上，border-image还有更精确的参数可以控制。大多数情况下，我们会使用这种类型的图片来为元素添加图片边框。

但作为新功能介绍，小编就不再详细演示这类图片的参数控制了。都说“师傅领进门，修行靠个人”，相信通过对border-image的简单介绍，大家都可以体会到CSS3新功能的魅力了。