首页 > 代码库 > 边框《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权威指南》读书笔记