css border-style属性简介说明


摘要:
下文讲述css相关属性border-style的属性功能说明,如下所示:


css border-style属性功能说明

border-style属性功能:
设置html元素的边框样式

border-style语法:  
border-style:<border-style>{1,4}
    <border-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-style为四个相关属性:
  [border-top-style]||[border-right-style]||[border-bottom-style]||[border-left-style]
none:
    无轮廓,当参数值为none时,border-color将被忽略,border-width计算值为0,除非边框轮廓为图像,即border-image
hidden:
    隐藏边框,IE7及以下尚不支持
dotted:
   点状轮廓,IE6下显示为dashed效果
dashed:
   虚线轮廓
solid:
   实线轮廓
double:
   双线轮廓,两条单线与其间隔的和等于指定的border-width值
groove:
   3D凹槽轮廓
ridge:
   3D凸槽轮廓
inset:
   3D凹边轮廓
outset:
   3D凸边轮廓
border-style相关说明:
 如输入四个参数值,将按上、右、下、左的顺序作用于四边
 如输入一个值,则应用于四条边
 如输入两个,则第一个用于上、下,第二个用于左、右
 如输入三个参数,则第一个用于上,第二个用于左、右,第三个用于下
border-style属性注意事项:
   当Border-width设置为0时,则border-style失去其应用的作用

border-style示例说明:

<meta charset="utf-8" />
<style>
div{
 margin:5px;
 width:100px;
 }
.none{padding:10px;border:0 none;background:#eee;}
.hidden{padding:10px;border:3px hidden #000;background:#eee;}
.dotted{padding:10px;border:3px dotted #000;background:#eee;}
.dashed{padding:10px;border:3px dashed #000;background:#eee;}
.solid{padding:10px;border:3px solid #000;background:#eee;}
.double{padding:10px;border:3px double #000;background:#eee;}
.groove{padding:10px;border:3px groove #000;background:#eee;}
.ridge{padding:10px;border:3px ridge #000;background:#eee;}
.inset{padding:10px;border:3px inset #000;background:#eee;}
.outset{padding:10px;border:3px outset #000;background:#eee;}
</style>
<p>
 maomao365.com<br />
 border-style示例说明
</p>
<hr />
<div class="none">none</div>
<div class="hidden">hidden</div>
<div class="dotted">dotted</div>
<div class="dashed">dashed</div>
<div class="solid">solid</div>
<div class="double">double</div>
<div class="groove">groove</div>
<div class="ridge">ridge</div>
<div class="inset">inset</div>
<div class="outset">outset</div>
css  border-style属性简介说明

css
border-style属性简介说明