1.半透明邊框
問題:
如果我們要為一個(gè)容器設(shè)置紅色背景和一道黑色半透明邊框，我們可能會(huì)這樣寫:
border: 20px solid rgba(0,0,0,0.5);
background: red;
但是效果卻是這樣的（圖1-1.png）；我們的半透明顏色怎么沒有實(shí)現(xiàn)半透明邊框？
解決方案：
我們可以通過background-clip屬性來調(diào)整上面的默認(rèn)行為，把它是值設(shè)為padding-box,然后就出現(xiàn)了我們想要的效果（圖1-2.png）；
border: 20px solid rgba(0,0,0,0.5);
background: red;
background-clip: padding-box;
2.background-clip
既然用到了background-clip屬性，那我們就來看看這個(gè)屬性吧;
background-clip:
設(shè)置元素的背景（背景圖片或顏色）是否延伸到邊框下面。
| 值（values ） | 說明 |
|---|---|
border-box |
默認(rèn)初始值，背景延伸到邊框外沿（但是在邊框之下） |
padding-box |
邊框下面沒有背景，即背景延伸到內(nèi)邊距外沿 |
content-box |
背景裁剪到內(nèi)容區(qū) (content-box) 外沿 |
text |
實(shí)驗(yàn)API，背景裁剪到前景文本（ foreground text）內(nèi)。 |
示例
CSS content
span {
border: 10px blue;
border-style: dotted double;
margin: 1em;
padding: 2em;
background: #F8D575;
}
.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }
.text { background-clip: text; }
HTML content
<span class="border-box">border-box</span>
<span class="padding-box">padding-box</span>
<span class="content-box">content-box</span>
<span class="text">text</span>
效果：（圖2-1.png）
3.border-style
4.border-image
初始值：
border-image-source: noneborder-image-slice: 100%border-image-width: 1border-image-outset: 0sborder-image-repeat: stretch
4.1 border-image-source: none | <image>
where
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
where
<image()> = image([ [ <image> | <string> ]? , <color>? ]!)
<image-set()> = image-set(<image-set-option>#)
<element()> = element( <id-selecter> )
<cross-fade()> = cross-fade(<cf-mixing-image>,<cf-final-image>?)
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
點(diǎn)擊這里查看文檔.
Gradient示例：
<linear-gradient()> = linear-gradient( [<angle> | to <side-or-corner>]?, <color-stop-list>)
CSS content
.gradient {
border: 30px solid;
border-image-source: linear-gradient(to right, red, green, blue);
/*border-image-source: linear-gradient(90deg, red, green, blue);*/
border-image-slice: 10;
padding: 20px;
}
HTML content
<div class="gradient">The image is stretched to fill the area.</div>
效果：（圖4-1.png）
4.2 border-image-slice:[ <number> | <percentage> ]{1,4}&& fill?
這個(gè)border-imge-slice屬性傳入1~4個(gè)參數(shù)（number沒有單位專指像素或百分比值）將圖片分割成9個(gè)部分,1,2,3,4四個(gè)區(qū)塊是不會(huì)拉伸,不會(huì)平鋪，稱之為盲區(qū)，5,6,7,8四個(gè)區(qū)塊可以通過border-image-repeat來控制拉伸平鋪和重復(fù)（stretch:默認(rèn)值,拉伸; repeat:平鋪; round:整數(shù)次平鋪;），第9區(qū)塊不顯示，傳入?yún)?shù)fill則顯示第9區(qū)塊，分割情況如下圖（圖4-2.png && 圖4-3.png）:
我們通過上面這張圖片（81px^81px）來看傳入不同個(gè)數(shù)的參數(shù)是如何分割這張圖片的；
1個(gè)參數(shù)
/* border-image-slice: slice */
border-image-slice: 27;
border: 30px solid transparent;
padding: 20px;
border-image-source:url(https://mdn.mozillademos.org/files/4127/border.png);
**2個(gè)參數(shù)**（參考圖4-3.png）
>```
/* border-image-slice: vertical horizontal */
border-image-slice: 40 40.5;
border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
3個(gè)參數(shù)
/* border-image-slice: top horizontal bottom */
border-image-slice: 27 40 27;
border: 30px solid transparent;
padding: 20px;
border-image-source:url(https://mdn.mozillademos.org/files/4127/border.png);
**4個(gè)參數(shù)**(參考圖4-2.png)
>```
/* border-image-slice: top right bottom left */
border-image-slice: 27 40 27 27;
border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
4.3 border-image-width:[ <length> | <percentage> | <number> | auto ]{1,4}
語(yǔ)法：
border-image-width: all /* One-value syntax */
E.g. border-image-width: 3;
border-image-width: vertical horizontal /* Two-value syntax */
E.g. border-image-width: 2em 3em;
border-image-width: top horizontal bottom /* Three-value syntax */
E.g. border-image-width: 5% 15% 10%;
border-image-width: top right bottom left /* Four-value syntax */
E.g. border-image-width: 5% 2em 10% auto;
設(shè)置邊框圖片的width，如果超出了設(shè)置的border-width,會(huì)向內(nèi)擴(kuò)展；查看下方示例，比較（圖4-10.png && 圖4-11.png）；
示例：
border: 30px solid transparent;
padding: 20px;
border-image-source: url("https://mdn.mozillademos.org/files/4127/border.png");
border-image-slice: 27;
border: 30px solid transparent;
padding: 20px;
border-image-source:url(https://mdn.mozillademos.org/files/4127/border.png);
border-image-slice: 27;
border-image-width: 1 2 1 1;
**4.4 border-image-outset:`[ <length> | <number> ]{1,4}`**
**語(yǔ)法：**
/* border-image-outset: sides /
border-image-outset: 30%;
/ border-image-outset:vertical horizontal /
border-image-outset: 10% 30%;
/ border-image-outset: top horizontal bottom /
border-image-outset: 30px 30% 45px;
/ border-image-outset:top right bottom left */
border-image-outset: 7px 12px 14px 5px;
效果是將邊框圖片延伸到盒子外面，查看下放示例，比較（圖4-12.png && 圖4-13.png）；
**示例:**
>```
border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
border-image-slice: 27;
margin: 60px;
border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
border-image-slice: 27;
margin: 60px;
border-image-outset: 2 1 1 1;
4.4 border-image-repeat:[ stretch | repeat | round ]{1,2}
| 值（value） | 說明 |
|---|---|
stretch |
默認(rèn)初始值 ，；拉伸 |
repeat |
平鋪 |
round |
整數(shù)次平鋪 |
語(yǔ)法：
border-image-repeat: type /* One-value syntax */
E.g. border-image-value: stretch;
border-image-repeat: horizontal vertical /* Two-value syntax */
E.g. border-image-width: round space;
本內(nèi)容根據(jù)《css揭秘》, MDN 和自己的理解進(jìn)行整理；
感謝您的閱讀。
