CSS半透明邊框的實現執行個體詳解(圖)
1.半透明邊框
問題:
如果我們要為一個容器設定紅色背景和一道黑色半透明邊框,我們可能會這樣寫:
border: 20px solid rgba(0,0,0,0.5);background: red;
但是效果卻是這樣的(圖1-1.png);我們的半透明顏色怎麼沒有實現半透明邊框?
圖1-1.png
解決方案:
我們可以通過background-clip屬性來調整上面的預設行為,把它是值設為padding-box,然後就出現了我們想要的效果(圖1-2.png);
border: 20px solid rgba(0,0,0,0.5);background: red;background-clip: padding-box;
圖1-2.png
2.background-clip
既然用到了background-clip屬性,那我們就來看看這個屬性吧;
background-clip:
設定元素的背景(背景圖片或顏色)是否延伸到邊框下面。
值(values ) |
說明 |
border-box |
預設初始值 ,背景延伸到邊框外沿(但是在邊框之下) |
padding-box |
邊框下面沒有背景,即背景延伸到內邊距外沿 |
content-box |
背景裁剪到內容區 (content-box) 外沿 |
text |
實驗API ,背景裁剪到前景文本( foreground text)內。 |
樣本
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)
圖2-1.png
3.border-style
4.border-image
初始值:
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()>
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
<p class="gradient">The image is stretched to fill the area.</p>
效果:(圖4-1.png)
圖4-1.png
4.2 border-image-slice: [ <number> | <percentage> ]{1,4}&& fill?
這個 border-imge-slice 屬性傳入1~4個參數(number沒有單位專指像素或百分比值)將圖片分割成9個部分,1,2,3,4四個區塊是不會展開,不會平鋪,稱之為盲區,5,6,7,8四個區塊可以通過 border-image-repeat 來控制展開平鋪和重複( stretch:預設值,展開; repeat:平鋪; round:整數次平鋪; ),第9區塊不顯示,傳入參數 fill 則顯示第9區塊,分割情況如(圖4-2.png && 圖2-3.png):
圖4-2.png
圖4-3.png
我們通過上面這張圖片(81px^81px)來看傳入不同個數的參數是如何分割這張圖片的;
1個參數
/* 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](https://mdn.mozillademos.org/files/4127/border.png));
圖4-4.png
圖4-5.png()
2個參數(參考圖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));
圖4-6.png
圖4-7.png()
3個參數
/* 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](https://mdn.mozillademos.org/files/4127/border.png));
圖4-8.png()
4個參數(參考圖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-9.png()
4.3 border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}
文法:
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;
設定邊框圖片的width,如果超出了設定的border-width,會向內擴充;查看下方樣本,比較(圖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;
圖4-10.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;border-image-width: 1 2 1 1;
圖4-11.png
4.4 border-image-outset: [ <length> | <number> ]{1,4}
文法:
/* 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;
圖4-12.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-image-outset: 2 1 1 1;
圖4-13.png
4.4 border-image-repeat: [ stretch | repeat | round ]{1,2}
值(value) |
說明 |
stretch |
預設初始值 ,;展開 |
repeat |
平鋪 |
round |
整數次平鋪 |
文法:
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;