1、border-width
(1)border-width不支持百分比,受其本身的语义和使用场景决定的。border 没有继承性,如果使用百分比,那么就没有参考对象,浏览器解析就不知道
百分数应该乘以谁来确定边框的宽度,所以只能用指定值的大小来确定。
(2)border-width还支持关键字:thin(1px),medium(默认值,3px),thick(5px)
(3)为什么默认设置是medium(3px)?
是因为:border-style:double要设置 3px,才能有效果。
2、border-style
border-style:solid ,实线
border-style:dashed 虚线 只能安安静静的做一个虚框(由于其兼容性问题,在IE和谷歌浏览器下显示比例不一样)
border-style:dotted 点线 :
border-style:double 双线 :兼容性好,可以用于绘制图形
计算规则:双线宽度永远相等,中间间隔+-1 绘图例子:
border-style:inset 内凹
3、border-color与color:
(1)在没有指定border-color时,会使用color作为边框色。
典型案例:
4、border 与background定位
(1)在css2中background定位是具有局限性的:它只能相对左上角数值定位,不能相对于右下。
如:background-position:
(2)在css2.0中 background-position如何实现相对于右边定位呢? 利用border
background-position:100% 都是相对于右下角定位的
5、border与三角等图形的构建
三角变化例子:
通过改变width、height 以及border-color对应的颜色和透明度
(1) (2) (3)
(4)三角形
实际应用: 梯形:
6、border-与透明边框
(1)始于ie7,兼容性好
drop-shadow 投影实现图标颜色变换