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

初始值：

• border-image-source: none
• border-image-slice: 100%
• border-image-width: 1
• border-image-outset: 0s
• border-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()>

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-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;

 

 

來自：http://www.jianshu.com/p/d5b16170526c