border-image详解
属性定义及使用说明
border-image
属性允许开发者使用图片来定义元素的边框,替代了传统的纯色边框。这个属性实际上是一个简写属性,聚合了多个子属性,包括用于定义图片源、切片方式、边框宽度、外扩以及平铺模式的设置。下
语法
border-image: source slice width outset repeat|initial|inherit;
需要注意的是,使用-webkit-text-stroke会导致文本的渲染性能下降,特别是当文本内容非常多或者在移动设备上时,可能会影响到性能和体验。
属性 | 描述 |
---|---|
border-image-source | 定义用作边框的图片的路径。如果没有提供图像,边框将不会显示。 |
border-image-slice | 控制图片如何被切分成九个部分(四个角、四条边和中间部分)。 |
border-image-width | 定义图片边框的宽度。 |
border-image-outset | 决定边框图像区域超出边框边缘的距离。 |
border-image-repeat | 指定边框图片如何在边框的四个边上重复。 |
注意事项
- 当使用fill关键词时,中间部分会被拉伸以填充剩余空间。
- 如果只提供图片源和切片值,其他值(宽度、外扩、平铺方式)会使用默认值或基于边框宽度计算得出。
- border-image不影响盒子模型的尺寸,边框图像的大小调整不会改变元素的实际宽度和高度。
属性详解
-
border-image-source
定义用作边框的图片的路径。如果没有提供图像,边框将不会显示。值可以是URL引用或none。
-
border-image-slice
控制图片如何被切分成九个部分(四个角、四条边和中间部分)。数值可以是百分比或长度值,用来指定沿边框图像的切割线位置。默认值是100%,意味着整个图像将被分割成九个相等的部分。
-
border-image-slice
控制图片如何被切分成九个部分(四个角、四条边和中间部分)。数值可以是百分比或长度值,用来指定沿边框图像的切割线位置。默认值是100%,意味着整个图像将被分割成九个相等的部分。
-
border-image-width
决定边框图像区域超出边框边缘的距离,使得边框图像可以在元素的背景之上延伸。接受长度值,正值会使边框图像覆盖到元素的背景上。
-
border-image-repeat
指定边框图片如何在边框的四个边上重复。可能的值包括stretch(拉伸以填满边框)、repeat(平铺重复)、round(平铺重复并可能缩放图像以适应边框宽度)和space(平铺重复并在必要时在图像之间插入均匀间隔)。
举例:
核心代码:
<!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>
.container {
width: 400px;
height: 200px;
background-color: rgba(79, 166, 255, 0.5);
margin: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
width: 180px;
height: 30px;
text-align: center;
line-height: 30px;
font-family: SourceHanSansCN-Regular;
border-radius: 6px;
display: inline-block;
position: relative;
/* background-color: rgba(79, 166, 255, 0.5); */
cursor: pointer;
}
/* 伪元素 ::before 被用来创造一个覆盖整个容器的层,它具有圆角和渐变背景。 */
.btn::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* 内边距1px来显示边框 */
padding: 1px;
/* 圆角 */
border-radius: 6px;
/* 渐变背景,需要渐变的边框的颜色 */
background: linear-gradient(to right, yellow 0%, green 100%);
/* 随便定义一个颜色,只是为了覆盖当前这个伪元素 */
-webkit-mask-image: linear-gradient(red, red), linear-gradient(red, red);
-webkit-mask-clip: content-box, padding-box;
/* exclude排除,只显示不重合的地方 */
mask-composite: exclude;
/* 只显示下方遮罩,重合的地方不显示 */
-webkit-mask-composite: destination-out;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="btn">带圆角的渐变色边框</div>
</div>
</body>
</html>