网页设计中的全局边框

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

下面我们来看所有边框属性中最简短的简写属性:border.

值:border

[<border-width> || <border-style>||<border-color>] | inherit

初始值:根据单个属性

应用于:所有元素

继承性:无

计算值:根据指定确定

这个属性有一个好处,它相当简洁,虽然这种简洁性也带来一些限制。在讨论这些限制之前,先来看border如何工作。如果网站建设人员希望所有hi元素都有一个粗的银色边框,这很简单。以下声明的结果如图8-34所示:

h1{border:thick silver solid;}

这些值会应用到所有4个边。尽管以下做法也不错,不过上面的声明更可取:

h1{border-top:thick silver solid:

border-bottom:thick silver solid;

border-right:thick silver solid;

border-left:thick silver solid;}/*same as previous example*/

使用border的缺点在于,只能定义“全局”的样式。宽度和颜色。换句话说,为border提供的值将完全相等地应用到所有4个边。如果网站建设人员希望一个元素有不同的边框,则需要使用另外的某个边框属性。当然,可以充分利用层叠:

H1{border:thick silver solid;

border-left-width:20px;}

第二个规则会覆盖第一个规则为左边框设置的width值,将宽度替换为20px,如图8-35所示

与以往一样,要简写属性仍要特别当心:如果少了一个值,就会自动地填入默认值,这可能会让网页设计有意想不到的后果。考虑以下情况:

h4{border-style:dashed solid double;}

h4{border:medium green;}

在此,第二个规则中没有指定border-style,这意味着网站建设系统会使用默认值none,这样一来,所有h4元素都不会有任何边框。

当前文章标题:网页设计中的全局边框

当前URL:http://www.lyjtt.cn/news/wzzz/Global-frame.html

上一篇:网页设计中的简写边框属性

下一篇:网页设计中的边框和行内元素

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