日度归档:2020年6月26日

css border-left属性简介说明


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


css border-left属性功能说明

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

border-left语法:  
border-left:
   [border-left-width]||[border-left-style]||[border-left-color]
---------------参数说明------------------------------
[border-left-width]:
   设置选择对象的左边框宽度
[border-left-style]:  
   设置选择对象的左边框样式
[border-left-color]:
   设置选择对象的左边框颜色

border-left相关说明:
  1.这是一个汇总设置左边框属性的方法,可通过此属性设置左边框的颜色,宽度,样式 
  2.此css属性可应用于市面上所有浏览器

border-left示例说明:

<meta charset="utf-8" />
 <style>
  .a{
    border-left:15px solid green;
    width:120px;
    height:90px;
    }
</style>
<p>
maomao365.com <br />
定义html元素的左边框
</p>
<hr />
<div class="a">我的左边框被定义</div>
css之border-left属性示例说明

css之border-left属性示例说明

css border-left-width属性简介说明


摘要:
下文讲述css左边框宽度属性border-left-width的功能说明,如下所示:


css border-left-width属性功能说明

border-left-width属性功能:
设置css选中的html元素左边框的宽度,此参数值不允许负值

border-left-width属性语法:
    border-left-width = <length>|thin|medium|thick
---------------参数说明------------------------------
border-left-width属性值
<length>:
  使用长度值设置左边框的宽度,不允许负值
medium:
  设置默认左边框的宽度,此值为3px
thin:
  设置比默认值细的左边框宽度,此值为1px
thick:
   设置比默认值厚的左边框宽度,此值为5px
border-left-width相关说明:
  1.此css属性可应用于市面上所有浏览器
  2.border-left-width使用js操作的属性为borderLeftWidth

border-left-width示例说明:

<meta charset="utf-8" />
 <style>
  .a{
    padding:10px;
    border-left-width:15px;
    border-left-style:solid;
    border-left-color:green;
    width:120px;height:90px;
    }
</style>
<p>
maomao365.com <br />
border-left-width示例说明
</p>
<hr />
<div class="a">border-left-width示例</div>
css之border-left-width属性示例说明

css之border-left-width属性示例说明

css border-left-style属性简介说明


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


css border-left-style属性功能说明

border-left-style属性功能:
设置html元素左边框显示的风格样式

border-left-style属性语法:
    border-left-style = none | hidden | dotted | dashed | 
          solid | double | groove | ridge | inset | outset
---------------参数说明------------------------------
border-left-style属性值:
none:无轮廓,当属性值为,border-color将不起任何作用,此时border-width为0
hidden:隐藏边框,IE7及以下尚不支持
dotted:点状轮廓,IE6下显示为dashed效果
dashed:虚线轮廓
solid:实线轮廓
double:双线轮廓,两条单线与其间隔的和等于指定的border-width值
groove:3D凹槽轮廓
ridge:3D凸槽轮廓
inset:3D凹边轮廓
outset:3D凸边轮廓
border-left-style相关说明:
  1.此css属性可应用于市面上所有浏览器
  2.border-left-style使用js操作的属性为borderLeftStyle
  3.border-left-style所使用的属性值同border-style属性值一致
  4.border-width等于0时,此属性值将不会产生任何效果

border-left-style示例说明:

 <meta charset="utf-8" />
 <style>
  .a{
    padding:10px;
    border-left-width:5px;
    border-left-style:dashed;
    border-left-color:green;
    width:130px;height:90px;
    }
</style>
<p>
maomao365.com <br />
border-left-style示例说明
</p>
<hr />
<div class="a">border-left-style示例</div>
css之border-left-style属性示例说明

css之border-left-style属性示例说明