borderImage 边框图片
这个的兼容性不是很好,所以在正常的前端开发工作中很难用到,但是在不考虑兼容性的情况下,它无疑的很强大的,因为它可以漂亮的边框,而不在是单调的线条。
CSS 允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单,也不用在某些情况下使用九宫格了。使用 border-image
时,其将会替换掉 border-style
所设置的边框样式。虽然规范要求使用 border-image
时边框样式必须存在,但一些浏览器可能没有实现这一点。
通过 border-image
可以给元素得而边框样式,而不单单是系统提供的那几种。换句话说就是我们可以来充当元素的边框对它进行环绕。
border-image:source slice repeat;
包含
.demo{
width: px;
height: px;
background: #ccc;
border-width: px;
border-style: solid;
border-image: url(./../img/border-image.jpg);
}
图
我们这使用的是 bordr-image
这个,并定义了路径 其它的不设定使用认值。
.demo2{
width: px;
height: px;
background: #ccc;
border-width: px;
border-style: solid;
border-image-source: url(./../img/border-image.jpg);
}
图
我们可以看到 例1 和 例2 两个图是一样的,因为我们仅仅使用了 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-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;
}
图
从图中的红色箭头我们可以看到,边框和灰色元素之间有一条 2px 的白线,这是因为我设置了 image-outset
向外偏移 了 22px 的原因。
.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;
}
图
.demo{
border-width:px;
border-image-slice:;
}
还有一点要注意的是 slice
不需要挂单位。
2. 如果想填充中心可以-webkit-border-image
就像下面这样
.demo{
-webkit-border-image: url(./../img/border-image.jpg) stretch;
}
这是 border-imgae
的连写方式,第和第二个 20 都是 slice
,认出它的最后就是 它们都不带单位。