borderImage 边框图片

发布时间：2023-03-15 11:04:18 所属栏目：教程来源：

导读：border-image 边框图片
这个属性的兼容性不是很好，所以在正常的前端开发工作中很难用到，但是在不考虑兼容性的情况下，它无疑的一个很强大的属性，因为它可以自定义漂亮的边框，而不在是单调的线条。

1. 官方解

border-image 边框图片
这个属性的兼容性不是很好，所以在正常的前端开发工作中很难用到，但是在不考虑兼容性的情况下，它无疑的一个很强大的属性，因为它可以自定义漂亮的边框，而不在是单调的线条。

1. 官方解释
CSS 属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单，也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式。虽然规范要求使用 border-image 时边框样式必须存在，但一些浏览器可能没有实现这一点。

2. 解释
通过 border-image 属性可以给元素添加自定义得而边框样式，而不单单是系统提供的那几种。换句话说就是我们可以自定义一个图片来充当元素的边框对它进行环绕。

3. 语法
border-image:source slice repeat;
包含属性

属性   描述
border-image-source   背景图片源
border-image-slice   需要展示出来图片的尺寸，如果这个量等于图片的尺寸就都相当于整个图片展示出来
border-image-width   图片边框的宽度。
border-image-outset   边框图像区域超出边框的量。
border-image-repeat   图片的填充形式
4. 实例
使用 border-image 为元素自定义一个图片边框。
.demo{
width: px;
height: px;
background: #ccc;
border-width: px;
border-style: solid;
border-image: url(./../img/border-image.jpg);

使用 `border-image` 为元素自定义一个图片边框效果图
我们这使用的是 bordr-image 这个属性，并定义了图片路径其它的不设定使用默认值。

使用 border-image-source 为元素设定一个边框。
.demo2{
width: px;
height: px;
background: #ccc;
border-width: px;
border-style: solid;
border-image-source: url(./../img/border-image.jpg);

使用 `border-image-source` 为元素设定一个边框效果图
我们可以看到例1 和例2 两个图是一样的，因为我们仅仅使用了 border-image-source 增加了图片路径而已。

我们在 demo2 上增加 border-image-slice 。
.demo2{
width: px;
height: px;
background: #ccc;
border-width: px;
border-style: solid;
border-image-source: url(./../img/border-image.jpg);
border-image-slice: ;

增加 `border-image-slice`效果图
通过给 slice 设定一个 70 我们得到了一个漂亮的边框，下面重点说下这个属性值是如何作用在边框图片上的。
4. 继续在 demo2的基础上增加 border-image-outset 。

.demo2{
width: px;
height: px;
background: #ccc;
border-width: px;
border-style: solid;
border-image-source: url(./../img/border-image.jpg);
border-image-slice:;
border-image-outset:px;

增加 `border-image-outset`效果图
从效果图中的红色箭头我们可以看到，边框图片和灰色元素之间有一条 2px 的白线，这是因为我设置了 image-outset 向外偏移了 22px 的原因。

使用 border-image-repeat 来为 demo2 设定图片的填充形式
.demo2{
width: px;
height: px;
background: #ccc;
border-width: px;
border-style: solid;
border-image-source: url(./../img/border-image.jpg);
border-image-slice:;
border-image-outset:px;
border-image-repeat: repeat;

使用 `border-image-repeat` 来为 demo2 设定图片的填充形式效果图
通过效果图我们可以看到图片是以平铺重复的方式来填充的，而这个属性默认是 stretch 拉伸来填充图片的。这个属性还有以下值
属性值   描述
stretch   默认值，拉伸图片来填充区域。
repeat   平铺并重复图像来填充区域。
round   类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。
space   不拉伸图片，而是让图片成四周环绕即左上右上右下左下。
initial   关键字用于设置 CSS 属性为它的默认值。可以用于任何 HTML 元素上的任何 CSS 属性。
inherit   继承父级的设定
5. 兼容性
IE   Edge   Firefox   Chrome   Safari   Opera   ios   android
11   12+   50+   5+   9.1+   43+   9.3+   2.1+
6. 经验分享
这个属性使用并不太难，不过其中的border-image-slice属性在使用的时候有一个小技巧，就是当想要其中 image 不失真即不拉伸，slice 要和 width 一样。
例如：
.demo{
border-width:px;
border-image-slice:;
}
还有一点要注意的是 slice 不需要挂单位。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!