css - border

/*边框*/
div {
	border-width: 1px;
	border-style: solid;
	border-color: #000;
}

/*简写*/
div {
	border: 1px solid #000;
}

/*四角*/
div {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #000;
}

/*圆角*/
div {
	border-radius: 100%;
	border-radius: 3px 3px 0 0;
	border-top-right-radius: 3px;
}

/*图形*/
div {
	width: 0;
	border: 100px solid #f0f;
	border-left-color: #f00;
	border-right-color: #00f;
	border-top-color: #0f0;
}

从图中可以看到, 四角区域由相邻的border均分. 由此结合border透明, 圆角, 宽度, 旋转变形, 形成三角形, 扇形, 梯形等图形