css3 ------ box-shadow

浏览数：19 / 时间：2015年06月09日

语法：<shadow> = inset? && <length>{2,4} && <color>?    

注释：问号表示可选参数；{2，4}表示最少2个参数最多4个；
当length = 2时，代表position x 和position y的值；
当length = 3时,代表position x, position y, blur;
当length = 4时，代表position x, position y, blur, spread;

example： 

当length = 2时：

 
element {
  width: 300px;    
  height: 192px;
  background-color: #C14343;
  position: relative;
  box-shadow: 18px 14px 0px 0px #914E60;
}

当length = 3时：

 
element {
  width: 300px;    
  height: 192px;
  background-color: #C14343;
  position: relative;
  box-shadow: 18px 14px 5px 0px #914E60;
}

当length = 4时：

 
element {
  width: 300px;    
  height: 192px;
  background-color: #C14343;
  position: relative;
  box-shadow: 18px 14px 5px 8px #914E60;
}

当使用inset属性时：

 
 
element{
  border:5px solid blue;
  border-radius: 20px;
  background-color:orange;
  width: 144px;
  height: 144px;
  box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
}

浏览器的支持:

box-shadow  // ie, firefox, chrome, opera
-webkit-box-shadow  //chrome, opera
-moz-box-shadow  //都不支持

推荐box-shadow   generator:  https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Box-shadow_generator
参考文献：http://www.w3.org/TR/css3-background/










css3 ------ box-shadow,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class 代码 java style src os class 代码 java style src os

相关文章

随机文章

您可能还喜欢

您可能还喜欢