css探索之旅 » web前端实验室 » CSS3 double border

CSS3 double border:

浏览器参照基准：Firefox3.6 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE系列

双线框(border-style方式)：border-style:double

* 现代浏览器均支持

#double-border{
	border:3px double #000;
}

双线框（border-colors方式）：border-colors/-moz-border-colors

* 以下的不同双线框实现仅Firefox支持，其它浏览器暂不支持（不含渐变色的实现）

#double-border2{
	border-width:3px;
	border-style:solid;
	/* For Firefox3.6+ */
	-moz-border-top-colors:#000 #fff #000;
	-moz-border-right-colors:#000 #fff #000;
	-moz-border-bottom-colors:#000 #fff #000;
	-moz-border-left-colors:#000 #fff #000;
}

border-colors方式双线框的一些常规效果：

Figure 2：

Figure 3：

Figure 4：

Figure 5：

Figure 6：

Figure 7：

© Copyright Doyoe.com