css-border

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