网页设计中的边框宽度

  • 2018-12-12 17:32:16
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

一旦网站制作人员为边框指定一个样式,下一步就是使用border-width为它指定一个宽度。

border-width

值:[thin | medium | thick|<length>]{1,4}| inherit

初始值:对简写属性未定义

应用于:所有元素

继承性:无

计算值:见各个属性(border-top-style等)

还可以使用它的某个相关(单边)属性。

border-top-width、border-right-width、border-bottom-width、border-left-width

值:thin | medium | thick |<length>| inherit

初始值:medium

应用于:所有元素

继承性:无

计算值:绝对长度,如果网页设计中边框的样式为none或hidden,则为0

当然,这些属性用于设置某个特定边框边的宽度,这与单边外边距属性类似。

注意:在网站建设CSS2.1中,边框宽度还不能指定为百分数值,这确实有待改进。

为边框指定宽度有4种方法:可以指定一个长度值,如4px或0.1em,或者使用3个关键字之一。这3个关键字分别是thin、medium(默认值)和thick。这些关键字不一定对应某个特定的宽度,它们只是相对定义。根据规范,thick总是比medium宽,而medium则总是比thin宽。

不过,具体的宽度没有被设计人员定义,所以一个用户代理可能将thin、medium和thick分别设置为等于5px、3px和2px,而另一个用户代理则分别设置为3px、2px和1px。不论用户代理对各个关键字具体使用多大的宽度,不管边框出现在哪里,各关键字对应的宽度在文档中总保持不变。所以,如果medium等于2px,宽度为medium的边框总是2像素宽,而不论边框在h1元素外还是在p元素外。图8-25展示了处理这3个关键字的一种方法,还显示了它们彼此之间有何关系,以及与所包围的内容有何关系。

假设一个段落设置了外边距,背景颜色以及一个边框样式:

p{margin:5px;background-color:silver;border-style:solid;}

默认地,边框的宽度为medium。这很容易改变:

p{margin:5px;background-color:silver;border-scyle:solid;border-width:thick;}

当然,边框宽度可以设置得很极端,如设置50像素的边框,如图8-26所示,

p{margin:5px;background-color:silver;border-style:solid;border-width:50px;}

还可以使用建站人员熟悉的两种方法为单边设置边框宽度。第一种方法是使用本节开始时提到的某个特定属性,如border-bottom-width。另一种方法是在border-width中使用值复制,如图8-27所示:

h1{border-style:dotted;border-width:thin 0;}

p{border-style:solid;border-width:15px 2px 7px 4px;}

迄今为止,我们只谈到了如何使用可见的边框样式,如solid或outset。下面考虑在将border-style设置为none时会出现什么情况:

p{margin:5px;border-style:none;border-width:20px;}

尽管边框的宽度为20px,但style设置为none„在这种情况下,不仅边框的样式没有了,其宽度也会变成0。边框消失了。为什么呢?

如果你还记得,本章是这样说的:样式为none的边框不存在。这些词是经过仔细斟酌才选定的,因为这有助于解释到底发生了什么。由于边框不存在,所以它不可能有宽度,因此width自动设置为0,而不论你原先定义的是什么。毕竟,如果一个水杯是空的,你就不能把它描述为装着半杯“没有东西”。杯子里确实有内容物时才能讨论杯子内容物的高度。同样,只有当边框存在时才能讨论边框的宽度。

建立网站时一定记住,这一点很重要,因为忘记声明边框样式是一个常犯的错误。这会让网站建设人员迷惑不已,因为乍看上去样式应该能正确出现。根据以下规则,所有h1元素都不会有任何边框,更不用说20像素宽了:

h1{border-width:20px;}

由于border-style的默认值是none,如果没有声明样式,就相当于声明border-style:none。因此,如果你希望边框出现,就必须声明一个边框样式。

当前文章标题:网页设计中的边框宽度

当前URL:http://www.lyjtt.cn/news/wzzz/Border-width.html

上一篇:网页设计中的边框背景

下一篇:网页设计中的边框颜色

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)