CSS边框属性

 

border-style边框风格属性

这个属性用来设定上下左右边框的风格：

none (没有边框，无论边框宽度设为多大)

dotted (点线式边框)

dashed (破折线式边框)

solid (直线式边框)

double (双线式边框)

groove (槽线式边框)

ridge(脊线式边框)

inset (内嵌效果的边框)

outset (突起效果的边框)

实例代码：

<html>
<head>
<title>边框风格属性 border-style </title>
<style type="text/css">
.d1 {border-style:none;}
.d2 {border-style:solid;}
.d3 {border-style:dotted;}
.d4 {border-style:dashed;}
.d5 {border-style:double;}
.d6 {border-style:groove;}
.d7 {border-style:ridge;}
.d8 {border-style:inset;}
.d9 {border-style:outset;}
</style>
</head>
<body>
<div>这个div的CSS边框风格(border-style)属性缺省值是none。</div>
<br>
<div class = "d1">这个div的CSS边框风格(border-style)属性是none。</div>
<br>
<div class = "d2">这个div的CSS边框风格(border-style)属性是solid。</div>
<br>
<div class = "d3">这个div的CSS边框风格(border-style)属性是dotted。</div>
<br>
<div class = "d4">这个div的CSS边框风格(border-style)属性是dashed。</div>
<br>
<div class = "d5">这个div的CSS边框风格(border-style)属性是double。</div>
<br>
<div class = "d6">这个div的CSS边框风格(border-style)属性是groove。</div>
<br>
<div class = "d7">这个div的CSS边框风格(border-style)属性是ridge。</div>
<br>
<div class = "d8">这个div的CSS边框风格(border-style)属性是inset。</div>
<br>
<div class = "d9">这个div的CSS边框风格(border-style)属性是outset。</div>
<br>
</body>
</html>

效果如图： 

 border-width边框宽度属性

这个属性用来设定上下左右边框的宽度

medium (是缺省值)

thin (比medium细)

thick (比medium粗)

用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。

实例代码：

<head>
<title>边框宽度 border-width</title>
<style type="text/css">
.d1 {border-style:solid;}
.d2 {border-width:thin;border-style:solid;}
.d3 {border-width:thick;border-style:solid;}
.d4 {border-width:10px;border-style:solid;}
.d5 {border-width:5mm;border-style:solid;}
</style>
</head>
<body>

<div class= "d1">这个div的CSS边框宽度(border-width)属性缺省值是medium。</div>
<br>
<div class= "d2">这个div的CSS边框宽度(border-width)属性值是thin。</div>
<br>
<div class= "d3">这个div的CSS边框宽度(border-width)属性值是thick。</div>
<br>
<div class= "d4">这个div的CSS边框宽度(border-width)属性值是10px。</div>
<br>
<div class= "d5">这个div的CSS边框宽度(border-width)属性值是5mm。</div>

</body>
</html>

效果如图：

 

 

border-color边框颜色属性

这个属性用来设定上下左右边框的颜色。例句如下：

.d5 {border-color:gray;border-style:solid;}

边框属性(border)

这个属性是边框属性的一个快捷的综合写法，它包含border-width, border-style和border-color。例句如下：

.d1 {border:5px solid gray;}

实例代码：

<head>
<title>边框属性 border</title>
<style type="text/css">
.d1 {border:5px solid gray;}
</style>
</head>
<body>
<div class= "d1">这个div的边框属性：边框宽度(border-width)为5px；边框风格(border-style)为直线式；边框颜色为灰色。</div>
</body>
</html>

效果如图：

 

 

单边边框属性

上下左右四个边框不但可以统一设定，也可以分开设定。

设定上边框属性，你可以使用border-top, border-top-width, border-top-style, border-top-color。

设定下边框属性，你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。

设定左边框属性，你可以使用border-left, border-left-width, border-left-style, border-left-color。

设定上边框属性，你可以使用border-right, border-right-width, border-right-style, border-right-color。

实例代码：

<title>单个边框属性 </title>
<style type="text/css">
.d1 {border-top:5px solid #FF0000}
.d2 {border-bottom:5px  solid  #FF0000}
.d3 {border-left:5px  solid  #FF0000}
.d4 {border-right:5px  solid  #FF0000}
</style>
</head>
<body>
<div>单个边框属性：</div>
<p><div class = "d1">设置上边框用border-top</div>
<p><div class = "d2">设置下边框用border-bottom</div>
<p><div class = "d3">设置左边框用border-left</div>
<p><div class = "d4">设置右边框用border-right</div>
</body>
</html>

效果如图：

 

 

 

posted on 2011-12-05 10:43  雨馨  阅读(163)  评论(0)    收藏  举报