CSS-描邊

CSS的描邊是CSS中經常使用的屬性，屬於基礎知識。但除了經常使用的純色描邊以外，CSS還有不少類型的描邊。我是發現弄不清border-image是如何渲染的因此才寫了這一篇文章。

outline

outline 用於描繪HTML元素的輪廓，它和border最大的區別就是outline不佔空間，主要表如今

• 不受box-sizing影響
• 不會撐開周邊的內容
• 能夠設置邊線與元素之間的偏移，outline-offset
• 若是元素被分割成多行繪製的話outline始終是繪製整個元素的外部輪廓，而border會繪製每個區域的外部邊框

outline 下的子屬性相對border來講比較少，只有outline-width，outline-style，outline-color，和須要單獨設置的outline-offset。

border類型

border 用於設置HTML元素的邊界（描邊），佔據文檔流空間，繪製位置受box-sizing影響。

border能夠設置的屬性很是多，應該是CSS中單類型樣式屬性最多的。大概能夠分爲border （經常使用），border-image，border-block，border-inline。

border

經常使用的描邊樣式，其下的子屬性包括border-wdith，border-style，border-color。這三個子屬性的做用和有效值和outline同樣。

• border-width，描邊的寬度，有效值爲具體的數量值，單位能夠是任何有效的CSS單位。不能取百分比值
• border-style，描邊的樣式，有效值爲 none，hidden，dotted，dashed，solid，double，groove，ridge，inset，outset。個取值的效果以下圖。
• border-color，描邊的顏色，有效值爲全部合法的CSS顏色值，包括rgba()

以下，border和outline的區別，很明顯border是會佔據文檔流，撐開下方節點，而outline不會

以下，border-style的繪製效果。

這裏最要講none和hidden，兩個都是不繪製出border，可是在表單中相連的兩個單元格中設置爲none會繪製出重疊的邊框，而設置成hidden不會。

border還引伸出能夠單獨設置某一條邊框的子屬性集分別爲：

• border-top
• border-bottom
• border-left
• border-right

每條邊一樣能夠單獨設置-width,-style,-color等

border-image

咱們經常使用的是用顏色填充的邊框，border還能夠用圖片或者漸變色填充邊框。這裏用到的就是border-image。

border-image能夠分紅如下幾個子屬性。

• border-image-source
• border-image-slice
• border-image-outset
• border-image-repeat
• border-image-width

一、border-image-source

用於設置邊框的圖片路徑或者是漸變樣式。

二、border-iamge-slice

用法相對比較複雜。咱們簡單的能夠理解爲border-image生效以後，會用4條線將圖片分割爲9部分，而後將這9個區域的圖片分別填充到border中對應的區域上，以下圖所示。而border-image-slice就是用來控制這4條線距離邊框邊界的距離。

border-image-slice 的有效取值爲

• border-image-slice : 20;// 四條線統一設置
• border-image-slice ：20 30;//分別設置水平線和垂直線
• border-image-slice ：20 10 30;//分別爲上，水平，下線
• border-image-slice ：10 20 30 40;//分別爲上，下，左，右線

border-image-slice 的屬性值爲非負浮點數不帶單位或者爲百分比值，同時還有一個特殊值fill用於設置上圖的第"9"區域。該值能夠設置在屬性值中的任意位置，若是border-image-slice設置了該值，則第"9"區域會被添加到元素的對應位置中，至關於整個元素都會被邊框圖片填充，相似於設置了background-image。

三、border-image-repeat

用於設置每個區域中，圖片的填充方式。當咱們將圖片分區完以後，再將圖片添加到border對應的區域中，有可能沒法鋪滿border對應區域，這時用border-image-repeat來設置填充方式，有效的取值以下：

• stretch ：拉伸填充
• repeat ：平鋪填充
• round ：平鋪填充，整數填充，不能徹底填充時會總體作必定比例拉伸至鋪滿
• space ：平鋪填充，整數填充，不能徹底填充時會留白

border-image-repeat 能夠分別設置水平和垂直的填充方式，如border-image-repeat ：stretch space;

四、border-image-width

用於設置圖片邊框的高度。當border-image-width小於border-width時，只會在border外沿填充border-image-width大小，當border-image-width大於border-width會往元素內部填充。

五、border-image-outset

用於設置圖片能夠超出元素外框的大小，有效取值爲非負浮點值，1爲偏移100%，能夠分別設置水平垂直或者上下左右各超出多少。

border-block 和 border-inline

接下來說幾個和border相關的新屬性，border-block和border-inline。這兩個樣式目前還處在試驗階段，只有41版以上的火狐瀏覽器支持。但它們的衍生樣式border-block-end等已經獲得新版chrome，safari等瀏覽器的支持。

border-block 和 border-inline 繪製出來的邊框線的位置取決於元素的書寫水平或者垂直佈局、文本書寫的方向、文本水平溢出方向。在默認狀況下各自的做用和各衍生樣式的做用以下：

• border-block : 繪製兩條垂直邊線，相似border-top加上border-bottom。
• border-block-start ： 在垂直方向頂部繪製一條邊線，相似於border-top。
• border-block-end ：在垂直方向的底部繪製一條邊線，相似於border-bottom。
• border-inline-start : 相似於border-left。
• border-inline-end ：相似於border-right。

咱們先以border-block-end 爲例來看它們是如何繪製邊線的。能夠看出border-block-end會受writing-mode影響。而border-bottom固定繪製在底部。

再看一下border-inline-end。能夠看出border-inline-end會受writing-mode和dirction影響。而border-right固定繪製在右邊。

這幾個新樣式屬性它們自己是border，每個樣式均可以更改它們的邊線的大小（-widht），顏色（-color），樣式（-style）。但它們有相似於文本中的對齊線（text-decoration）能夠跟隨文本方向所變化特性。能夠用來繪製虛線的文本下劃線。

相對來講border-block和border-inline更加語義化一些，也擴展了border的使用場景，使得樣式效果看起來更加的符合邏輯，以下面這種狀況，原本設置的是文本底部繪製描邊，實際看起來像是在文本的右邊繪製描邊。

border-block和border-inline屬於CSS邏輯屬性（CSS logical properties），相似的屬性還有margin-block，padding-block等等，有興趣的能夠自行谷歌。

完