1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > div的border-style 边框风格属性

div的border-style 边框风格属性

时间:2019-05-02 14:52:25

相关推荐

div的border-style 边框风格属性

边框风格属性(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>

<styletype="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>

<divclass="d1">这个div的CSS边框风格(border-style)属性是none。</div>

<br>

<divclass="d2">这个div的CSS边框风格(border-style)属性是solid。</div>

<br>

<divclass="d3">这个div的CSS边框风格(border-style)属性是dotted。</div>

<br>

<divclass="d4">这个div的CSS边框风格(border-style)属性是dashed。</div>

<br>

<divclass="d5">这个div的CSS边框风格(border-style)属性是double。</div>

<br>

<divclass="d6">这个div的CSS边框风格(border-style)属性是groove。</div>

<br>

<divclass="d7">这个div的CSS边框风格(border-style)属性是ridge。</div>

<br>

<divclass="d8">这个div的CSS边框风格(border-style)属性是inset。</div>

<br>

<divclass="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。突起效果

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。