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

标签：

原文地址：http://www.cnblogs.com/Fawzia/p/5928136.html