border-image 边框图片

目录

border-image-source  边框图片地址

border-image-slice  图像分割位置

border-image-width  边框图片的宽度

border-image-repeat:  边框图片重复方式

 border-image的复合写法

---

如何利用css如何创建如图上下两个的边框？

使用传统的背景图片是无法随意改变尺寸的，因此就需要使用到边框图片

边框图片，即使用图片来创建边框，将一张边框图片裁切并沿边缘分布，适用于创建图像边框以及渐变色边框

以下给出一段实例， 请下载该边框图片

 css

.panel {
        width: 400px;
            height: 300px;
            border: 15px solid pink;
            border-image-source: url(images/border.png);
            /* 不需要加单位 */
            border-image-slice: 30 30 30 30;
            /* border-image-slice: 30; */
            /* 这个属性默认的是 border的宽度 但是 有区别，  这个是 边框图片的宽度 不会挤压文字 */
            border-image-width: 30px;
            border-image-repeat: round;
      }

html

<div class="panel"></div>

border-image-source  边框图片地址

border-image-source：none | <image>

当 border-image-source 属性值为 none 或者指定图像不可用时，则会显示默认边框样式，对该实例而言，为：

border: 1px solid #000;

也可以通过下列实现一个简单的渐变色边框

div{
            width: 400px;
            height: 400px;
            border: 15px solid black;
            /*border-image: linear-gradient(45deg, #30e8bf 40% , #ff8235 50%) 45 ; */
            border-image: linear-gradient(45deg, #30e8bf 40% , #ff8235 50%) 1 ; 
            /* 后面的1是border-image-slice,必须要加，在渐变有倾斜角度时，
    会影响颜色交汇处的角度，所以设置成最小的1就可以了，这样是接近垂直的，
    你也可以把在上面的属性值为45的取消注释，看看交汇处是不是变歪了？ */
        }

border-image-slice  图像分割位置

必选，图像的四边分别向内推移给定的距离，将图像分隔成一个九宫图，周围的八格是用到的部分

代码如下，注意，虽然推移的实际距离的确是按照px计算的，但是书写代码时不能带单位

border-image-slice: 30 30 30 30;  /*上 右 下 左*/
border-image-slice: 30 30 30;     /*上  两侧  下*/
border-image-slice: 30 30;        /*上下  左右*/
border-image-slice: 30;           /*每边*/

1368四个将作为边框的四个角，而2457则可以选择作为边框的四条边，被拉伸或者重复

 边缘推移的顺序与设置边框的顺序完全一致，都为：

给定四个值时为，上、右、下、左、

三个值为，上、左右、下

两个值为，上下、左右

一个值为、全部

 

 

border-image-width  边框图片的宽度

可选，默认值为border-width的数值，这也是之前所说的，不用太关心border的具体属性值的缘故，因为各项属性值一般都会重新赋值

border-image-width: 70px;
border-image-width: 1rem;
border-image-width: 50%;    //以盒子自身的宽高为参考，50%时，四角的图案完全覆盖盒子
border-image-width: 2;      //border-width的倍数
border-image-width: auto;   //使用border-image-slice的数值

border-image-repeat:  边框图片重复方式

可选，默认为strech

  border-image-repeat: round;
  border-image-repeat: repeat;
  border-image-repeat: stretch;

strech  拉伸

round 均分（会对黄色块压缩以使其贴合，类似contain）

repeat 重复（不会压缩四边的九宫格部分，因此图案可能衔接不上）

 border-image的复合写法

重复方式的前后顺序可以交换，不写时默认为strech

图像分割位置30以及边框图片宽度25px中，宽度可以不写，默认为边框宽度，分割位置必写

 border-image: url(./images/border.png) 30 30 30 30 repeat;
 border-image: url(./images/border.png) repeat 30 30 30;
 border-image: url(./images/border.png) 30 30/25px repeat;
 border-image: url(./images/border.png) repeat 30/25px ;