用CSS3轻松实现图片边框
当前位置:以往代写 > 网页教程 >用CSS3轻松实现图片边框
2019-06-14

用CSS3轻松实现图片边框

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

用CSS3轻松实现图片边框_边框样式_图片填充_CSS3_课课家

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

基础代码

  效果如下图所示

基础代码效果图

  

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

设置背景颜色

  边框背景就出来了

设置白色背景效果

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

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

不用嵌套,做出图片填充边框代码

  效果如下图所示

不用嵌套,做出图片填充边框代码效果

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

适用于作为图片边框的图片

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

    关键字:

在线提交作业