HTML5与CSS3基础教程:设置边框厚度、风格、颜色等

摘要:针对元素的某一边设置边框,并设置它的厚度、风格和颜色。如果指定了内边距,边框将包围在元素内容和内边距的外面。图11.9.11和图11.9.12展示了我们可用的所有边框样式。
作者:图灵教育
来源:《HTML5与CSS3基础教程》(第八版)
第十一章全部章节:
第一节:用CSS布局及注意事项
第二节:构建(有利于搜索引擎索引的)页面
第三节:在旧版浏览器中为HTML5元素添加样式(让HTML5新元素兼容任何浏览器)
第四节:对默认样式进行重置或标准化(抹平不同浏览器之间的样式差异)
第五节:盒模型(用CSS分控制每一个盒模型)
第六节:控制元素的显示类型和可见性(用CSS改变元素默认显示类型)
第七节:设置元素的高度和宽度(为段落、表单等设置高度和宽度)
第八节:在元素周围添加内边距

11.9 设置边框

可以在元素周围创建边框(参见图11.9.1和图11.9.2),或针对元素的某一边设置边框(参见图11.9.3~图11.9.10),并设置它的厚度、风格和颜色。如果指定了内边距(参见11.8节),边框将包围在元素内容和内边距的外面(参见图11.9.5~图11.9.10)。图11.9.11和图11.9.12展示了我们可用的所有边框样式。

blob.png

图11.9.1 边框可以应用于任何元素,包括图像。如果希望对一个以上的元素设置相同的边框样式,最好引入一个类,从而可以复用,例如.frame { border: 5px solid #bebebe; }

blob.png

图11.9.2 边框将图像很好地框起来了

blob.png

图11.9.3 这些简单的边框对页面的主导航和头部起到了下定义的作用(如图11.9.4所示)。作为一种常见的做法,每个导航链接都包含在一个列表项目(li)里。注意,这里对第一个li使用了border-left: none;,以取消其左边框(即改回至它的默认样式)

blob.png

图11.9.4 边框让主导航更加突出,让导航链接彼此分开,还能有效地区分页面头部和它下面的内容(这里没有显示出来)。水平的边框会延伸至页面的整个宽度

blob.png

图11.9.5 导航容器顶部和底部的一点点儿内边距使格局发生了微妙的变化

blob.png

图11.9.6 内边距将水平线和垂直线分开了

1. 定义边框风格

输入border-style: type,其中的type可以是none、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove(槽线)、ridge(脊线)、inset(凹边)或outset(凸边)。

2. 设置边框宽度

输入border-width: n,这里的n是需要的宽度(含单位,如4px)。

3. 设置边框颜色

输入border-color: color,这里的color是颜色名称、十六进制值或RGB、HSL、RGBA、HSLA颜色(参见7.5节的“CSS颜色”)。

4. 使用简记法同时设置多个边框属性

(1) 输入border。

(2) 如果需要,输入-top、-right、-bottom或-left将边框效果限制在某一条

边上。

(3) 如果需要,输入-property,这里的property可以是style(风格)、width(宽度)或color(颜色),仅使用单个属性设置边框。

(4) 输入冒号(:)。

(5) 输入恰当的值(如前面介绍的那样)。如果跳过了第(3)步,则可以指定所有三种边框属性(如border:1px solid和border-right: 2px dashed green;)。如果在第(3)步中指定了一种属性,则只能使用这种属性可以接受的值(如border-right-style: dotted;)。

提示:默认情况下,Internet Explorer会对作为链接的图像添加一个蓝色的边框。为了取消这一样式,可以在样式表中添加img { border: none; }。这里,示例页面也加入了这一规则,因为网站的标识就位于一个指向主页的链接里面。(这个例子是主页,但整个网站的页面都使用相同的标识代码。)

提示:border简写属性及各个边框属性(border-width、border-style和border-color)均可接受一至四个值。如果使用一个值,那么它会应用于全部四个边。如果使用两个值,那么前一个值会应用于上下两边,后一个值会应用于左右两边。如果使用三个值,那么第一个值会应用于上边,第二个值会应用于左右两边,第三个值会应用于下边。如果使用四个值,那么它们会按照时钟顺序,依次应用于上、右、下、左四个边。

提示:要让边框显示出来,至少必须定义边框样式。如果没有定义样式,就不会显示边框。边框样式的默认值是border-style: none。

提示:如果使用简记法,如border或border-left等,则未提供的属性将显示其默认值。因此,border: 1px black;相当于border: 1px black none;,这意味着不会显示边框(即便在之前使用border-style指定了边框样式)。

提示:边框的默认颜色是元素的color属性的值(参见10.9节)。

提示:border属性可用于表格及其单元格,相关示例参见18.1节。

提示:默认情况下,元素的宽度和高度设置不包括边框大小。11.7节第一条提示解释了如何覆盖默认设置。

提示:CSS3引入了border-image属性。除Internet Explorer以外,浏览器对它的支持程度较好(参见http://caniuse.com/#search=border-image)。关于border-image,参见www.sitepoint.com/

css3-border-image和css-tricks.com/。 

提示:边框不是继承的。

blob.png

图11.9.7 我在一条声明中为多个标题添加了边框,效果参见图11.9.8(名为mod的类代表了页面中的一个通用模块)

blob.png

图11.9.8 我们对附注栏中的三个标题也应用了同样的样式,底部的内边距确保了边框和标题文本之间拉开了一点距离

blob.png

图11.9.9 除了都有一个上边框,这里还对每篇博客文章下方的页脚应用了相似的效果(如图11.9.8所示)。每个这样的页脚都是一个带class="post-footer"的段落

blob.png

图11.9.10 如果没有上下内边框(如图11.9.7所示),则边框几乎会贴着文字(上)。添加了内边框后,效果看起来好多了(下)

blob.png

图11.9.11 在这个例子中,我为每个段落设置了内边距和默认边框。然后,对第一个段落设置了应用于四个边的边框宽度,并为每个边设置了不同的样式。对于余下的四个段落,使用一条声明并在其中重复10px比通过两个属性分开设置样式和颜色要方便一些

blob.png

图11.9.12 各浏览器对边框样式的处理方式并不完全相同。这是在Firefox中显示的不同边框样式,从中可以了解到不同样式的差异。另见彩插