css3——border-image属性的用法

项目需求是实现鼠标移到按钮上时，下方显示一张渐变的三角图片，于是想到使用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