css3 box-shadow属性全网最全说明


摘要:
下文采用举例的方式讲述css3中box-shadow属性的相关说明,如下所示:


css3 box-shadow属性功能说明

设置指定的html元素的阴影,可以为元素设置多组阴影效果,分组之间使用逗号分隔

 
css3 box-shadow属性语法说明:
  box-shadow:none | <shadow>[,<shadow>]*
    <shadow>=inset?&&[<length>{2,4}&&<color>?]
-------------参数值说明--------------
 none:无阴影
 <length>:
   第1个长度值用来设置对象的阴影水平偏移值,可以为负值
<length>:
   第2个长度值用来设置对象的阴影垂直偏移值,可以为负值
<length>:
   如果提供了第3个长度值则用来设置对象的阴影模糊值,不允许负值
<length>: 
   如果提供了第4个长度值则用来设置对象的阴影外延值,可以为负值
<color>:
   设置对象的阴影的颜色。
inset:
   设置对象的阴影类型为内阴影,当值为空时,则对象的阴影类型为外阴影
css3 box-shadow说明
      1.当我们设置多组shadow效果时,需使用逗号分隔

css3 box-shadow属性示例说明

  
<meta charset="utf-8" /> 
<style>
.divTest li{margin-top:25px;list-style:none;}
.divTest .outset{width:400px;
     padding:10px;background:#eee;
       -webkit-box-shadow:5px 5px rgba(0,0,0,.6);
       box-shadow:5px 5px rgba(0,0,0,.6);}
.divTest .outset-blur{width:400px;padding:10px;
    background:#eee;
    -webkit-box-shadow:5px 5px 5px rgba(0,0,0,.6);
    box-shadow:5px 5px 5px rgba(0,0,0,.6);}
.divTest .outset-extension{width:400px;padding:10px;
      background:#eee;
      -webkit-box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);
      box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);}
.divTest .inset{width:400px;padding:10px;
background:#eee;
-webkit-box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;
box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;}
.divTest .multiple-shadow{width:400px;padding:10px;
background:#eee;
-webkit-box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6);
box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6);}
</style>
<p>
 maomao365.com <br />
 box-shadow属性示例分享
</p>
<hr />
<ul class="divTest">
 	<li class="outset">外阴影常规效果<br />box-shadow:5px 5px rgba(0,0,0,.6);</li>
	<li class="outset-blur">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
	<li class="outset-extension">外阴影模糊外延效果<br />box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);</li>
	<li class="inset">内阴影效果<br />box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;</li>
	<li class="multiple-shadow">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
</ul>
css之box-shadow属性示例说明

css之box-shadow属性示例说明