CSS边框属性
整理课件
CSS边框属性
边框风格属性(border-style)
这个属性用来设定上下左右边框的风格，它的值如下：
none (没有边框，无论边框宽度设为多大)
dotted (点线式边框)
dashe3">这个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;}
★看案例：
整理课件
<html>
<head>
<title>边框颜色属性 border-color</title>
<style type="text/css">
.d1 {border-color:#FFA500;border-style:solid;}
.d2 {border-color:#33CC00;border-style:solid;}
.d3 {;border-color:#6600FF;border-style:solid;}
.d4 {border-color:#FF6347;border-style:solid;}
.d5 {border-color:gray;border-style:solid;}
</style>
</head>
<body>
<div class= "d1">这个div的CSS边框颜色(border-color)属性值是橙色。</div>
<br>
<div class= "d2">这个div的CSS边框颜色(border-color)属性值是绿色。</div>
<br>
<div class= "d3">这个div的CSS边框颜色(border-color)属性值是蓝色。</div>
<br>
<div class= "d4">这个div的CSS边框颜色(border-color)属性值是番茄红。</div>
<br>
<div class= "d5">这个div的CSS边框颜色(border-color)属性值是灰色。</div>
<br>
</body>
</html>
整理课件
边框属性(border)
这个属性是边框属性的一个快捷的综合写法，它包含border-width, border-style和border-color。例句如下：
.d1 {border:5px solid gray;}
★看案例：
整理课件
<html>
<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。
★看案例：
整理课件
<html>
<head>
<title>单个边框属性 </title>
<style type="text/css">
.d1 {border-top:5px solid #FF0000}
.d2 {border-bottom:5px solid #FF0000}
.d3 {border-
《css边框属性》 来自淘豆网m.daumloan.com转载请标明出处.
