PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> CSS >> 

CSS3属性box-shadow实现阴影效果教程

CSS3属性box-shadow实现阴影效果教程

来源:互联网  作者:  发布时间:2010-05-17
CSS3的box-shadow属性可以让我们轻松实现图层阴影效果。我们来

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

以下为引用的内容:

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

css3 box shadow 1 CSS3属性box shadow使用教程

这里的颜色值是HEX值,我们还可以使用RGBA值,RGBA值的好处是,它多了一个Alpha透明值,你可以控制阴影的透明度。

以下为引用的内容:

img{box-shadow: 0 0 10px rgba(0, 255, 0, .5)}

(2). 在上面的基础上加上20px的扩展

以下为引用的内容:

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

css3 box shadow 2 CSS3属性box shadow使用教程

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

以下为引用的内容:

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

css3 box shadow 3 CSS3属性box shadow使用教程


延伸阅读:
CSS3的新特性介绍
CSS3:文字阴影效果
css3.0中文手册
CSS圆角在CSS2和CSS3里的实现方法
用CSS3制作网页下拉菜单代码
CSS3的简单又实用的3个属性
各大浏览器CSS3和HTML5兼容速查表
CSS3常见的开发工具收集整理
css3.0新属性效果在ie下的解决方案
Tags: css3   属性   box-shadow   教程   阴影   css   C   效果   阴影效果   box  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号