css-border

Zero_A發表於2018-06-30
CSS

border也屬於CSS盒模型中的一個組成，這個屬性很簡單，但是通過border的變種實現，可以完成一些特殊圖形的繪製。本篇梳理有關border的相關屬性。

border

語法

border：<line-width> || <line-style> || <color>

  • <line-width>： <length> | thin（1px） | medium（3px） | thick（5px）

css-border

  • <line-style>： none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

css-border

三角形
<div class="border">

</div>
複製程式碼
.border {
    display: inline-block;
    border: 100px solid;
    border-color: red orange yellow green;
}
複製程式碼

css-border

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;
}
複製程式碼

css-border

  • 如果提供全部四個引數值，將按上左 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

相關文章