首页 > 代码库 > 边框《CSS权威指南》读书笔记
边框《CSS权威指南》读书笔记
元素的外边距内就是元素的边框。即围绕元素内容和内边距的一条或多条线。由于元素的背景不会在元素外边距以内,所以背景在元素外边框边界处停止。
边框有三个方面:宽度或粗细,样式或外观,颜色。
宽度默认值为medium,通常为2px,默认none,所以不一定能看到边框。
颜色默认是元素的前景色,如果没有前景色则是元素文本颜色,如果也没有,那么将继承父元素的文本颜色。
边框和背景
大多数浏览器遵循CSS2.1的定义,元素的背景是内容、内边距和边框处的背景。
有样式的边框
样式控制着边框的显示,没有样式,就没有边框。
border-style定义了10个不同的非inherit样式,包括默认值none。
double定义为两条线的宽度再加上这两条线之间的空间等于border-width值。两条线的粗细以及线之间的空间的宽度由用户代理决定。
多种样式
可以为给定边框定义多个样式,例如:
p.aside{border-style:solid dashed dotted solid;}
结果是段落由一个实线上边框、虚线右边框、点线下边框和一个实线左边框。
单边样式
border-top/right/bottom/left-style
如果三边有边框,一边无边框,有两种写法,第一种在样式里一一声明,这里不多说,说说第二种,
h1{border-style:solid;border-left-style:none;}
注意:必须把单边属性放在简写属性之后,如果放在简写属性之前则会覆盖单边属性的值。
边框宽度
为边框指定宽度有4种方法:长度值、thin、medium、thick
边框的默认宽度为medium
根本没有边框
在设置边框的宽度之前一定要声明border-style(默认值是none),否则是没有边框的,也就是边框的宽度设置无效。
边框颜色
border-color一次可以设置四个值,也可值复制。
透明边框
主要是将边框的颜色设置成透明的,值为transparent,这个值用于创建有宽度的不可见边框。
IE7之前版本不支持
简写边框属性
border-top/right/bottom/left:width style color;
顺序不重要,打乱了还是一个效果。
也可省略一些值,未声明的将会应用默认值。
边框和行内元素
其规则很大程度上与外边距和行内元素的相应规则相同。
上下边,边框不影响行内元素的行高,边框可能会覆盖其它元素。
左右边,文本会在边框旁边显示,不会覆盖左右两边的元素。
换行时和行内元素和外边距的规则一样,可能会将航中某些部分向后移一点点,而这有可能改变位于行尾的词。
边框《CSS权威指南》读书笔记