欢迎光临
我的个人博客网站

使用css设置边框背景图片


使用css的特有属性,给不同的盒子添加边框图片。
为什么会有这一场景呢。因为,UI给我们前端的边框图片可能未必适合我们当前的内容。
这里我们主要使用到的属性有:

  • border-image-source
  • border-image-slice
  • border-top-width
  • border-image-repeat

个别属性可以根据自己的个人情况决定是否添加,希望使用的时候自己甄别。

切边框图片的顺序:
使用css设置边框背景图片

下面是我的代码案例

<!DOCTYPE html> <html lang="en">  <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   <style>     * {       margin: 0;       padding: 0;     }      html,     body {       width: 100%;       height: 100%;     }      ul li {       list-style: none;     }      .box1 {       width: 300px;       height: 300px;       margin: 100px;       border: 5px solid #000;       border-image-source: url(./1.png);       /* 背景图片路径 */       border-image-slice: 10 20 20 20;       /* 如何切割图片 */       border-top-width: 5px;       /* 图片的宽度是多少 */       /* border-image-repeat: stretch; 默认是stretch */       /* border-image-repeat: round; */       /* round 是环绕 */     }      .box2 {       width: 300px;       height: 300px;       margin: 150px;       border: 5px solid #000;       border-image: url(./2.png) 40 / 10px;       /* 顺序为上左下右,如果4个值一样,那么就可以省略写成一个值 ,注意,这里不要加px       border-image 后面的/ 的意思是我切完图,将图放在多少个像素中的边框中去,       如果不写,就默认按照上面border中的像素去填充 */       /* 如果默认不写就是拉伸 stretch */     }      .box3 {       width: 300px;       height: 300px;       margin: 250px;       /* background-color: hotpink; */       border: 5px solid #000;       border-image: url(./3.png) 40 / 10px repeat;     }   </style> </head>  <body>   <!-- 大盒子 -->   <div class="box1">     我是盒子一   </div>   <div class="box2">     我是盒子二   </div>   <div class="box3">     我是盒子三(边框颜色有点浅哦)   </div> </body>  </html> 

三张边框图片素材,我也上传上来了。仅供参考。
使用css设置边框背景图片

使用css设置边框背景图片

使用css设置边框背景图片

代码效果图如下:
使用css设置边框背景图片

赞(0) 打赏
未经允许不得转载:张拓的天空 » 使用css设置边框背景图片
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏