div的border-style 边框风格属性
2011-06-20 12:54
597 查看
边框风格属性(border-style)
这个属性用来设定上下左右边框的风格,它的值如下:
none (没有边框,无论边框宽度设为多大)
dotted (点线式边框)
dashed (破折线式边框)
solid (直线式边框)
double (双线式边框)
groove (槽线式边框)
ridge(脊线式边框)
inset (内嵌效果的边框)
outset (突起效果的边框)
示例:分别使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS边框风格属性示例
<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>
这个div的CSS边框风格(border-style)属性缺省值是none。
这个div的CSS边框风格(border-style)属性是none。
这个div的CSS边框风格(border-style)属性是solid。 直线式边框
这个div的CSS边框风格(border-style)属性是dotted。点线式边框
这个div的CSS边框风格(border-style)属性是dashed。 破折线式边框
这个div的CSS边框风格(border-style)属性是double。 双线式边框
这个div的CSS边框风格(border-style)属性是groove。槽线式边框
这个div的CSS边框风格(border-style)属性是ridge。脊线式边框
这个div的CSS边框风格(border-style)属性是inset。内嵌效果
这个div的CSS边框风格(border-style)属性是outset。 突起效果
这个属性用来设定上下左右边框的风格,它的值如下:
none (没有边框,无论边框宽度设为多大)
dotted (点线式边框)
dashed (破折线式边框)
solid (直线式边框)
double (双线式边框)
groove (槽线式边框)
ridge(脊线式边框)
inset (内嵌效果的边框)
outset (突起效果的边框)
示例:分别使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS边框风格属性示例
<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>
这个div的CSS边框风格(border-style)属性缺省值是none。
这个div的CSS边框风格(border-style)属性是none。
这个div的CSS边框风格(border-style)属性是solid。 直线式边框
这个div的CSS边框风格(border-style)属性是dotted。点线式边框
这个div的CSS边框风格(border-style)属性是dashed。 破折线式边框
这个div的CSS边框风格(border-style)属性是double。 双线式边框
这个div的CSS边框风格(border-style)属性是groove。槽线式边框
这个div的CSS边框风格(border-style)属性是ridge。脊线式边框
这个div的CSS边框风格(border-style)属性是inset。内嵌效果
这个div的CSS边框风格(border-style)属性是outset。 突起效果
相关文章推荐
- div的border-style 边框风格属性 .
- border-style 边框风格属性
- 【自学笔记】css 各类边框样式 属性border-style
- div边框弧形设计,radius的用法,CSS3 border-radius 属性
- CSS border边框属性教程(color style)
- 测试窗体的FormBorderStyle属性,不同属性所对应的窗体边框显示情况
- 动态调整对话框属性(去掉标题栏,去掉边框,修改类似成Border:NONE样式)(调用ModifyStyle和ModifyStyleEx,然后调用SetWindowPos重新显示)
- CSS border边框属性教程(color style)
- div+css - CSS标准 - 8.5 Border properties边框属性
- CSS border-right-style属性设置元素的右边框样式
- Winform无边框窗体(FormBorderStyle属性设为None)自定义移动
- CSS通过边框border-style来写小三角
- POI 边框样式BorderStyle
- table的属性border-collapse 设置边框是否合并
- div style常用属性
- 如何让TextBox的黑色边框变成淡蓝色(borderstyle=FixedSingle)
- HTML5学习_day13(3)--border-radius属性(圆角边框)
- note2-div style常用属性 (转载)
- div第二课 margin外边框px大小 border边框的设置
- CSS+DIV之强化border属性