css-border

Zero_A發表於2018-06-30

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-radiusborder-top-right-radiusborder-bottom-left-radiusborder-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