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>
<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。 突起效果
  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值