CSS3实现阴影效果原来那么简单

HTML/CSS 2012-06-06 css3,阴影

在CSS2中,要弄阴影效果几乎要靠图片完成

在CSS3中,阴影只需要一句话,并且文字也可以加上阴影

阴影语句box-shadow

如以下代码

div {
     box-shadow:5px 6px 3px #999;
}

以上代码即可给页面所有DIV加上阴影效果。现在来解析下各个参数的使用

第一个参数5px,代表上下偏移,正数往下,负数往上,值越大偏移距离越大

第二个参数6px,代表左右偏移,正数往右,负数往左,值越大偏移距离越大

第三个参数3px,代表模糊程度,值越大,越模糊

第四个参数#999,代表阴影颜色

 

以上是盒子类型阴影,文字也可以加上阴影效果

文字阴影语句text-shadow

用法跟盒子阴影一样

如以下代码

p {
        text-shadow:1px 1px 1px #ccc;
}

使用阴影效果功能可以做出许多效果,并且省事很多,不再需要图片。特变是文字阴影,如果搭配得当甚至可以做出凸印的效果

文字链接:《CSS3实现阴影效果原来那么简单

文章地址:http://www.qttc.net/20120672.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 1