css border-width属性简介说明


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


css border-wdith属性功能说明

border-width属性功能:
设置边框的宽度,此参数不允许设置为负值

border-width语法:  
border-width:<border-width>{1,4}
    <border-width> = <length> | thin | medium | thick
border-width为四个相关属性:
   [border-top-width]||[border-right-width]||[border-bottom-width]||[border-left-width]
length:
   长度值指边框的宽度,不允许负值
medium:
   默认厚度的边框---为3px
thin:
   比默认厚度细的边框---1px
thick:
   比默认厚度粗的边框---5px
border-width相关说明:
 如输入四个参数值,将按上、右、下、左的顺序作用于四边
 如输入一个值,则应用于四条边
 如输入两个,则第一个用于上、下,第二个用于左、右
 如输入三个参数,则第一个用于上,第二个用于左、右,第三个用于下

border-width示例说明:

<meta charset="utf-8" />
 <style>
.one{padding:10px;
border-width:1px;
border-style:solid;
border-color:#000;}
.two{margin-top:10px;
padding:10px;
border-width:1px 5px;
border-style:solid;
border-color:#000 #f00;}
.three{margin-top:10px;
padding:10px;
border-width:1px 5px 10px;
border-style:solid;
border-color:#000 #f00 #090;}
.four{margin-top:10px;
padding:10px;
border-width:1px 5px 10px 15px;
border-style:solid;
border-color:#000 #f00 #090 #0ff;}
</style>

<p>
maomao365.com <br />
border-width提供不同参数个数示例
</p>
<hr />

<div class="one">1个参数值</div>
<div class="two">2个参数值</div>
<div class="three">3个参数值</div>
<div class="four">4个参数值</div>
css border-width示例分享

css border-width示例分享