border-image

從名字上不難理解，它的作用是給邊框添加圖片，類似于CSS中的background（背景）屬性，border-image屬性可以給盒子邊框添加背景圖片，

一般的邊框，要么是實線，要么是虛線（點狀，短橫線）（雖然也有其他樣式的邊框，但是不推薦使用），

但是遇到一切特殊的邊框，傳統邊框就束手無策了，

遇到這種邊框，不妨考慮下用 border-image ，

注意：

使用 border-image 時，其將會替換掉 border-style 屬性所設定的邊框樣式，也即 solid，dotted，dashed等，
雖然規范要求使用 border-image 時邊框樣式必須存在，但一些瀏覽器可能沒有實作這一點，不過，我們在使用 border-image 時，強烈建議把邊框樣式加上，

border-image 屬性是一個簡寫屬性，用于設定以下屬性：

border-image: url("images/xx.png")  位置  是否填充  重復性 ;

本文案例使用的圖片：每個圓圈 30*30 大小，

基本HTML：

<div class="box">
    這個是內容
</div>

基本樣式：

*{
    margin: 0;
    padding: 0;
}
.box{
    padding: 20px;
    width: 210px;
    margin-left: auto;
    margin-right: auto;
    border:30px #f30 solid;  
}

1. border-image-source

圖片來源地址，

對于border-image而言，border-image-souce 是唯一必需的，

若無特殊指定，其他屬性即為默認值，

.box{
    border-image: url("images/border.png");
}

黃色部分為 border 邊框區域，

2. border-image-slice

邊框圖片切片，

border-image-slice [<number> | <percentage>]{1,4} && fill?

指定4個值（4條分割線：top, right, bottom, left）將 border-image-source 分割成 9 宮格，如下：

border-image-slice 四條線的值型別為：number | percentage，

number ：不帶單位的數值，但是 1 代表 1個圖片像素，千萬不要給數值帶單位哦，
percentage：百分比，

值（數值、百分比）可以寫 1-4 個，理解方式參考 padding 和 margin 的值，

.box{
    /* 上下切片位：30px，左右切片位：20px*/
    border-image: url("images/border.png") 30 20;
}

fill “填充”：源圖片 9 宮格的中心塊將作為該元素的背景，

.box{
    border-image: url("images/border.png") 30 20 fill;
}

3. border-image-width

邊框圖片寬度，

border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}

border-image-width 引數的四種型別:

length：帶 px, em, in … 單位的尺寸值
percentage：百分比
number：不帶單位的數字；它表示 border-width 的倍數，
auto：使用 auto， border-image-width 將會使用 border-image-slice 的值

border-image-width 的引數不能為負值，

border-image-width的預設值是 number 型別：1，即邊框圖片的寬度跟邊框的寬度一致，

圖中，邊框圖片所占的寬度為邊框寬度 border-width 的 0.2，

4. border-image-outset

定義邊框影像可超出邊框的大小，

border-image-outset:[ <length> | <number> ]{1,4};

.box{
    border-image: url("images/border.png") 30 fill;
    border-image-width: 1;
    border-image-outset: 30px;
}

5. border-image-repeat

定義圖片如何填充邊框，

或為單個值，設定所有的邊框；或為兩個值，分別設定水平與垂直的邊框，

border-image-repeat:[ stretch | repeat | round | space ]{1,2} ;

stretch：拉伸，默認值，

.box{
    border-image: url("images/border.png") 30 fill stretch;
}

repeat：重復，可能出現圖片不完整情況，

.box{
    border-image: url("images/border.png") 30 fill repeat;
}

round：平鋪影像，當不能整數次平鋪時，根據情況放大或縮小影像，

.box{
    border-image: url("images/border.png") 30 fill round;
}

space：平鋪影像，當不能整數次平鋪時，會用空白間隙填充在影像周圍（不會放大或縮小影像）

.box{
    border-image: url("images/border.png") 30 fill space;
}

案例：郵票風格的圖片邊框

明白了圖片邊框的原理，那么，之前給的效果就很好做了，

所用到的圖片如下：

HTML：

<img src="images/w.jpg" class="img" alt="">

CSS：

*{
    margin: 0;
    padding: 0;
}
body{
    background: #888;
}
.img{
    border:31px #000 solid;
    margin-top: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-image: url("images/youpiao.png")  31  round;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/260076.html

標籤：其他

上一篇：HttpMessageConverter和Converter的區別