border-image属性用来添加边框图片
| 值 | 解释 |
|---|---|
| border-image-source | 用于指定要用于绘制边框的图像的路径 |
| border-image-slice | 图像边界向内偏移 |
| border-image-width | 图像边界的宽度 |
| border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
| border-image-repeat | 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round） |
border-image: source slice width outset repeat;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: pink;
border: 30px solid aqua;
border-image: url(./2.png) 0 38 0 repeat;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
1.border-image-slice
值越大，每个图片之间挨的越紧
屏幕录制 2023-09-18 085635
当值大于等于图片的宽时，侧边的图片则会消失
当值为负数时
2.border-image-width
border-image-width
3.border-image-outset
该值与border-image-slice相反，border-image-slice最后会压缩在上顶点，而border-image-outset则会压缩在下顶点
4.border-image-repeat
上述例子为repeat效果
stretch拉伸
拉伸铺满边框
round铺满
该值不会显示多余部分，也不会显示剩余部分
943
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
