border也屬於CSS盒模型中的一個組成,這個屬性很簡單,但是通過border的變種實現,可以完成一些特殊圖形的繪製。本篇梳理有關border的相關屬性。
border
語法
border:<line-width> || <line-style> || <color>
<line-width>: <length> | thin(1px) | medium(3px) | thick(5px)
<line-style>: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
三角形
<div class="border">
</div>
複製程式碼
.border {
display: inline-block;
border: 100px solid;
border-color: red orange yellow green;
}
複製程式碼
border-radius
語法
border-radius:[<length> | <percentage>] {1,4}[ / [ <length> | <percentage> ]{1,4} ]?
border-*-radius:[<length> | <percentage> ]{1,2}
這裡的屬性分拆有:border-top-left-radius
、border-top-right-radius
、border-bottom-left-radius
、border-bottom-right-radius
border-radius
用來定義元素的圓角。屬性提供2個引數,引數間以/
分隔,第一個引數標識水平半徑或半軸,第二個參數列示垂直半徑或半軸,如第二個引數值未定義,則直接複製第一個引數值。
.border-radius {
border: 10px solid black;
border-radius: 55pt/25pt;
}
複製程式碼
- 如果提供全部四個引數值,將按上左 top-left、上右 top-right、下右 bottom-right、下左 bottom-left的順序作用於四個角
- 提供三個,第一個用於top-left,第二個用於top-right和bottom-left,第三個用於bottom-right
- 提供兩個,第一個用於top-left和bottom-right,第二個用於top-right和bottom-left
- 只提供一個,將用於全部的四個角
此時,我們便知道,對於一個正方形,設定border-radius即半軸為他們長寬的一半,便可以畫圓。
border-image
語法
border-image:border-image-source || border-image-slice [ / border-image-width | / border-image-width ? / border-image-outset ]? || border-image-repeat
border-image-source
:定義元素邊框背景影像,可以是圖片路徑或使用漸變建立的“背景影像”。border-image-slice
:定義元素邊框背景影像從什麼位置開始分割。border-image-width
:定義元素邊框背景影像厚度。border-image-outset
:定義元素邊框背景影像的外延尺寸。border-image-repeat
:定義元素邊框背景影像的平鋪方式。
border-image屬性生效的前提是定義了border-width和border-style。 參考文件:Understanding border-image