css3——border-image属性的用法

旧城等待， 2021-12-23 11:21 357阅读 0赞

项目需求是实现鼠标移到按钮上时，下方显示一张渐变的三角图片，于是想到使用border-image来实现。

实现要使用图片做边框背景我们至少需要`border-image-source` 以及 `border-image-slice` 、 `border-style`。

`border-image-source` ：通过url引入图片； eg.  border-image-source: linear-gradient(red, blue);//可实现渐变色的边框。

border-image-slice ： top right bottom left；

border-image-width :图片宽度；

border-image-outset ： 使边框图片向外偏移 (值没有单位的哦)

示例：

border-image-outset: 20;//图片向外偏移20
    border-image-width: 20px;//图片宽度为20px(图片的原本尺寸为 20px * 17px )
    border-image-slice: 0 0 30 0;//只在下边设置图片。其他的三个方向就不会有图片显示。
    margin-bottom: 10px;//这一步特别重要，因为布局菜单组使用的 ul->li格式布局的，且鼠标点击按钮时，被选中的按钮下方才出现图片，否则不会出现；当时在项目中

没有使用margin-bottom属性，出现的图片没有完全脱离li,始终扒在li下方的border部分，与需求不符。且在IE和火狐浏览器中访问页面时，更是奇丑无比。

至此，才算基本上解决border-image在使用过程中只显示一方的问题。

除此之外，使用一个完整的边框图片作为边框加在div上面，需求又是另外一种：

当第一次将边框图像引入div时，完整的边框会呈现出等分的四个又像是复制后的缩小版，总之是四个分为两排显示，而我想要的是使之将整个div包裹住，于是有了下面的代码：

这样做的效果正常显示没问题，但是窗口或者div宽高变大即（easyui-window窗口可最大化）时，border\_image属性展示的边框会显示不完全，也不会平铺或者重复布满整个window

border-image-source: url("xx/image/xx.png");
    border-image-width: 800px;//边框图片的真实宽度；
    border-image-slice: 340;//这个数值我也没弄明白为哈可以这么大；
    border-image-outset: 10;//向外偏移10px，可使边框内部的内容不是那么紧凑
    border-image-repeat: round;//该属性平铺，不拉伸也不重叠

border-image实现渐变色的边框：

border-image-source: linear-gradient(red, blue); border-image-slice: 20;

于是又采用另外一种方式来引用border-image ,这种方式实现的border-image能够将window窗口包裹住，并且当拉大窗口或者最大化时border-image也随之拉大，只是采用的方式是重复平铺的方式（若是将border-image图片使用边框一样的图案，则不会感觉是重复边框的）

border: 15px solid transparent; //相当于边框的宽度，值越大边框宽度越宽，反之越窄
    -webkit-border-image: url("../../../src/assets/image/table_border.png") 27 27 24 24 round;// 27 27 24 24分别表示边框在上、右、下、左四个方向上的偏移量
    -moz-border-image: url("../../../src/assets/image/table_border.png") 27 27 24 24 round;
    border-image: url("../../../src/assets/image/table_border.png") 27 27 24 24 round;
    width: 800px;//图片的宽度
    resize: both;//***有了此属性则使用的div内部右下角将出现一个小三角，表示可以随意拖动大小；要是没有该属性，则拉动窗口大小变化时，border_image不会随之

变化。或者说border-image显示不完整。

虽然在项目中完成了两个border-image的效果；实际上现在也是懵的。。。。。。。。api文档上面说的这个属性个人觉得卵用没得，模棱两可。。。

[https://www.jianshu.com/p/6ca92208ae4f][https_www.jianshu.com_p_6ca92208ae4f]

转载于:https://www.cnblogs.com/LindaBlog/p/10721775.html

[https_www.jianshu.com_p_6ca92208ae4f]: https://www.jianshu.com/p/6ca92208ae4f