首页 > Web开发 > 详细

css3 ------ box-shadow

时间:2014-05-25 14:07:09      阅读:621      评论:0      收藏:0      [点我收藏+]

语法<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时:

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

当length = 3时:

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

当length = 4时:

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

当使用inset属性时:

 
 
bubuko.com,布布扣
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;
}
bubuko.com,布布扣

浏览器的支持:

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,布布扣,bubuko.com

css3 ------ box-shadow

原文:http://www.cnblogs.com/itahz/p/3751019.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!