CSS 边框样式
CSS边框样式
可以使用border-style来设置边框的样式，也可以分别来设置上下左右的样式：
border-top-style
border-left-style
border-right-style
border-bottom-style
边框样式有很多种，可以定义很多，比如单边框，虚线的边框，实线的边框，双边框，还有没有边框的边框。
<html>
<head>
<title>测试内边距</title>
<meta charset="utf-8">
<!-- 调用CSS样式表 -->
<style type="text/css">
p.none{border-style: none;}/*设置无边的边框*/
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}/*设置3D凹槽边框*/
p.ridge {border-style: ridge}/*设置3D垄状边框*/
p.inset {border-style: inset}/*设置3D inset 边框*/
p.outset {border-style: outset}/*设置3D outset 边框*/
</style>
</head>
<body>
<p class="none">我没有边框</p>
<p class="dotted">点状边框</p>
<p class="dashed">虚线边框</p>
<p class="solid">实线边框</p>
<p class="double">双线边框</p>
<p class="groove">3D凹槽边框</p>
<p class="ridge">3D 垄状边框</p>
<p class="inset">3D inset 边框</p>
<p class="outset"> 3D outset 边框</p>
</body>
</html>CSS边框宽度与颜色
边框宽度
边框宽度是通过border-width来定义的，可以分别设置上下左右4个属性
border-top-width
border-bottom-width
border-left-width
border-right-width
边框颜色
边框宽度是通过border-color来定义的，同样也可以分别设置上下左右4个属性
border-top-color
border-bottom-color
border-left-color
border-right-color
<!DOCTYPE html>
<html>
<head>
<title>测试内边距</title>
<meta charset="utf-8">
<!-- 调用CSS样式表 -->
<style type="text/css">
/*定义p标签，是实线边框*/
p {border-style: solid;}
.all {
/*定义所有边框宽度为5像素*/
border-width: 5px;
/*定义所有边框是颜色为橙色*/
border-color: #FF8000
}
.top {
/*定义上边框宽度为5像素*/
border-top-width: 5px;
/*定义上边框是颜色为橙色*/
border-top-color: #FF8000
}
.bottom {
/*定义下边框宽度为5像素*/
border-bottom-width: 5px;
/*定义下边框是颜色为橙色*/
border-bottom-color: #FF8000
}
.left {
/*定义左边框宽度为5像素*/
border-left-width: 5px;
/*定义左边框是颜色为橙色*/
border-left-color: #FF8000
}
.right {
/*定义右边框宽度为5像素*/
border-right-width: 5px;
/*定义右边框是颜色为橙色*/
border-right-color: #FF8000
}
</style>
</head>
<body>
<p class="all">我是设置所有边框的</p>
<p class="top">我只负责上面</p>
<p class="bottom">我负责下面</p>
<p class="left">我设置的是左边</p>
<p class="right">我设置的是右边</p>
</body>
</html>单独设置各边框
在CSS中，可以指定不同的侧面不同的边框：
实例
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
上面的例子也可以设置一个单一属性：
border-style:dotted solid;
border-style属性可以有1-4个值：
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double
border-style:dotted solid;
上、底边框是 dotted
右、左边框是 solid
border-style:dotted;
四面边框是 dotted
边框也拥有简写属性
border: 5px solid red;
哈哈哈
一个边框都那么多的样式
8年前 添加回复 0