Chinaunix首页 | 论坛 | 博客
  • 博客访问: 250700
  • 博文数量: 34
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 961
  • 用 户 组: 普通用户
  • 注册时间: 2013-07-11 17:19
个人简介

没有最好的语言,只有最适合的语言。

文章分类

全部博文(34)

文章存档

2016年(2)

2013年(32)

我的朋友

分类: Html/Css

2013-07-11 18:47:31

CSS 中的box-shadow

box-shadow有六个可设值:

img{box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 }

  • 当不设阴影类型时,默认为投影效果。当设为inset时,为内阴影效果。

  • X轴和Y轴位移不等同但类似于photoshop里面的”角度”和”位置。

  • 阴影大小、扩展、颜色和Photoshop里面的都同理。

     

     

CSS代码中只写了box-shadow,在实际使用中,你应该把-moz-box-shadow和-webkit-shadow也写上。你需要做的很简,复制两个box-shadow,在它们前面分别加上-moz-和-webkit-。img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
}

 

(1). 投影,没有位移,10px的阴影大小,没有扩展,颜色#06C

img{box-shadow:0 0 10px #06C;}

(2).  内阴影,无位移,10px大小,没有扩展,颜色#06C

img{box-shadow:inset 0 0 10px #06C;}

(3).  多重阴影效果

box-shadow可以同时使用多次,我们来个四色的阴影。

img{box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px green}

(4). 使用多个阴影属性的顺序问题

当给同一个元素使用多个阴影属性时,需要注意它的顺序,最先写的阴影将显示在最顶层。比如下面这段代码,我们先写一个10px的绿色阴影,再写一个10px大小但扩展20px的阴影。结果是:绿色阴影层在黄色阴影层之上。

img{box-shadow:0 0 10px green;box-shadow:0 0 10px 20px yellow}

 

要注意的是在IE中,其中的box-shadow:0 0 10px 20px yellow 要改成box-shadow:0px 0px 10px 20px yellow

 

阅读(1986) | 评论(0) | 转发(1) |
给主人留下些什么吧!~~