分类
WEB++技术

CSS3系列教程——Box-Shadow

Box Shadow:图层阴影效果。

目前支持的浏览器有:Firefox 3.5+、Chrome 4.0+、Safari 3.1+、Opear 10.5+。

Firefox支持的私有属性:-moz-box-shadow;
webkit内核的Safari和Chrome支持的私有属性:-webkit-box-shadow;
Opera支持的属性:box-shadow。

基本用法:

box-shadow一共包含6个值:阴影类型、X轴位移、Y轴位移、阴影模糊度、阴影扩展、阴影颜色。

其中阴影类型指的是内阴影(inset)和外阴影,不写默认为外阴影。

例1:外阴影,X轴位移向左10px,Y轴位移向下10px,模糊度为5px,没有扩散,颜色为#000。

-webkit-box-shadow:10px 10px 5px #000;

-moz-box-shadow:10px 10px 5px #000;

box-shadow:10px 10px 5px #000;

例2:内阴影,没有位移,模糊度5px,没有扩散,颜色为#000。

-webkit-box-shadow:inset 0 0 20px #000;

-moz-box-shadow:inset 0 0 20px #000;

box-shadow:inset 0 0 20px #000;

例3:多重阴影,一个内阴影,四边各一个外阴影。(代码中间用半角逗号隔开)

-webkit-box-shadow:inset 0 0 20px #6f4,0 -10px 5px #d4e,10px 0 5px #6fc,0 10px 5px #234,-10px 0 5px #4ac;
-moz-box-shadow:inset 0 0 20px #6f4,0 -10px 5px #d4e,10px 0 5px #6fc,0 10px 5px #234,-10px 0 5px #4ac;
box-shadow:inset 0 0 20px #6f4,0 -10px 5px #d4e,10px 0 5px #6fc,0 10px 5px #234,-10px 0 5px #4ac;

注:当给同一个元素使用多个阴影属性时,需要注意它的顺序,最先写的阴影将显示在最顶层。

unicac

...long long ago,he have a dream.

发表评论

邮箱地址不会被公开。 必填项已用*标注