船长 发表于 2009-05-27 10:54 | 分类：css | 阅读数：656 次
The CSS border properties define the borders around an element.
CSS边框属性用来定义环绕元素的边框（样式）
设置四个边框的样式 Set the style of the four borders
This example demonstrates how to set the style of the four borders.
Examples 实例：
<html>
<head>
<style type=”text/css”>
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>
<body>
<p class=”dotted”>虚点边框</p>
<p class=”dashed”>虚线边框</p>
<p class=”solid”>实线边框</p>
<p class=”double”>空心边框</p>
<p class=”groove”>虚边框</p>
<p class=”ridge”>实边框</p>
<p class=”inset”>凹边框</p>
<p class=”outset”>凸边框</p>
</body>
</html>
分别设置每个边框 Set different borders on each side
This example demonstrates how to set different borders on each side of the element.
Examples 实例：
<html>
<head>
<style type=”text/css”>
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style: groove double}
p.three {border-style: solid double groove}
</style>
</head>
<body>
<p class=”soliddouble”>欢迎来到 xsheji.com.cn</p>
<p class=”doublesolid”>欢迎来到 xsheji.com.cn</p>
<p class=”groovedouble”>欢迎来到 xsheji.com.cn</p>
<p class=”three”>欢迎来到 xsheji.com.cn</p>
</body>
</html>
四边框颜色设置 Set the color of the four borders
This example demonstrates how to set the color of the four borders. It can have from one to four colors.
Examples 实例：
<html>
<head>
<style type=”text/css”>
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
</style>
</head>
<body>
<p class=”one”>单色边框</p>
<p class=”two”>双色边框</p>
<p class=”three”>三色边框</p>
<p class=”four”>四色边框</p>
<p><b>注意：</b> “border-color” 属性不能单独使用。 要先用 “border-style” 属性规定边框。</p>
</body>
</html>
设置底部边框宽度 Set the width of the bottom border
This example demonstrates how to set the width of the bottom border.
Examples 实例：
<html>
<head>
<style type=”text/css”>
p
{
border-style: solid;
border-bottom-width: 15px
}
</style>
</head>
<body>
<p><b>注意：</b> “border-bottom-width” 属性不能单独使用。 要先用 “border-style” 属性先设置好边框。</p>
</body>
</html>
设置左边框宽度 Set the width of the left border
This example demonstrates how to set the width of the left border.
Examples 实例：
<html>
<head>
<style type=”text/css”>
p
{
border-style: solid;
border-left-width: 15px
}
</style>
</head>
<body>
<p><b>注意：</b> “border-left-width” 属性不能单独使用。 要先用 “border-style” 属性规定边框。</p>
</body>
</html>
设置右边框宽度 Set the width of the right border
This example demonstrates how to set the width of the right border.
Examples 实例：
<html>
<head>
<style type=”text/css”>
p
{
border-style: solid;
border-right-width: 15px
}
</style>
</head>
<body>
<p><b>注意：</b> “border-right-width” 属性不能单独使用。要先用 “border-style” 属性规定边框。</p>
</body>
</html>
设置顶部边框宽度 Set the width of the top border
This example demonstrates how to set the width of the top border.
Examples 实例：
<html>
<head>
<style type=”text/css”>
p
{
border-style: solid;
border-top-width: 15px
}
</style>
</head>
<body>
<p><b>注意：</b> “border-top-width” 属性不能单独使用。要先用 “border-style” 属性规定边框。</p>
</body>
</html>
