php中border属性,关于CSS之border属性的详细介绍

border的属性

1.border-width：不支持百分比，支持关键字，thin(1px)，medium(默认值，3px，默认值是3px的原因是只有当border是3px及以上时，border-style才有效

果)，thick(5px)

2.border-style:有不同值，下面分析分别为不同值时的应用

a.solid：可以实现三角，梯形

用solid实现三角和梯形

.triangle{

width: 0px;

height: 0px;

border-style:solid;

border-width: 50px;

border-color: red transparent transparent transparent;

}

.trapezia{

width: 40px;

height: 40px;

border-style: solid;

border-width: 50px;

border-color:transparent transparent green transparent ;

margin-top: 10px;

}

b.dashed:虚线，在chrome/Firefox浏览器中，虚线和实线的比例是3:1(稀)，在IE浏览器中，比例是2：1(密)

c.dotted:点线，在chrome/Firefox浏览器中，是方点，在IE浏览器中，是圆点(可以利用圆点实现圆角效果)

d.double:双线,计算规则，双线宽度永远相等，中间间隔+-1，例如，3px=1(内)+1(中间间隔)+1(外)，可以实现三道杠图形。

e.inset(内凹),outset(外凸),ridge(沟槽):风格过时，兼容性差，没有什么使用场景

3.border-color：在不指定color时，使用color作为边框色，可以利用这一特性，简化链接改变颜色时的css样式代码。例如：

鼠标移动时边框颜色的改变

.a{

width: 30px;

height: 30px;

padding: 20px;

margin:30px;

color: red;

border:1px solid;

}

.a:hover{

color: blue;/* border:1px solid;*/ }

哈哈

4.利用border可以实现背景图像的定位，因为背景图像在定位时是不计算border的

5.利用border实现等高布局，缺点是不支持百分比宽度

(4,5类似，都是利用border，使得与某侧距离固定)