网页设计中的一些边框汇总

发布于 2013年01月04日

[摘要]边框样式有多种可供选择。下图显示了8种不同样式的边框在Internet Explorer 5.5里的实际显示效果。在这个例子里，我们为这8种边框都选择了“金色（gold）”作为边框颜色、“厚(thick)”作为边框宽度。当然，这只是个例子，你可以为边框设置别的颜色和厚度。

中的一些边框汇总

我们可以将上面三个有关边框的CSS属性组合起来使用，从而制造出多种多样的变化。来举个例子，我们要为一个文档中的h1、h2、ul和p等元素分别定义不同的边框。尽管其显示效果也许并不那么美观，但是它很好地向你展示了多种变化的可能：

h1 {border-width: thick;border-style: dotted;border-color:gold;}

h2 {border-width: 20px;border-style: outset;border-color: red;}

p {border-width: 1px;border-style: dashed;border-color: blue;}

ul {border-width: thin;border-style: solid;border-color: orange;}

我们也可以为上边框、下边框、右边框、左边框分别指定特定的CSS属性。具体做法如下例所示：

h1 {border-top-width: thick;

border-top-style: solid;

border-top-color: red;

border-bottom-width: thick;

border-bottom-style: solid;

border-bottom-color: blue;

border-right-width: thick;

border-right-style: solid;

border-right-color: green;

border-left-width: thick;

border-left-style: solid;

border-left-color: orange;}

缩写[border]

跟许多其他属性一样，你也可以将有关边框的CSS属性缩写为一个border属性。让我们看一个例子：

p {border-width: 1px;border-style: solid;border-color: blue;}

可被缩写为：

p {border: 1px solid blue;}