使用css设置边框背景图片

时间:2022-06-23 15:30:02

使用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设置边框背景图片