鱼C论坛

 找回密码
 立即注册
查看: 4080|回复: 5

[资源分享] CSS3 HTML5实例三(块阴影与文字阴影)

[复制链接]
发表于 2012-6-26 03:06:28 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
a8ca2h343340.jpg

阴影效果曾让 Web 设计师既爱又恨,现在,有了 CSS3,你不再需要 Photoshop,已经有网站在使用这个功能了,如 24 Ways website.
-webkit-box-shadow: 10px 10px 25px #ccc;-moz-box-shadow: 10px 10px 25px #ccc;box-shadow: 10px 10px 25px #ccc;前两个属性设置阴影的 X / Y 位移,这里分别是 10px,第3个属性定义阴影的虚化程度,最后一个设置阴影的颜色。文字阴影也可以这样设置:text-shadow: 2px 2px 5px #ccc;


支持的浏览器:Firefox 3.1, Safari, Chrome (只支持 Box 阴影) ,Opera (只支持文字阴影).前3个数字表示红绿蓝三色的值,最后一个值代表透明度,另外,我们还可以使用 opacity 实现透明度(目前的灯箱效果多使用该技巧 - 译者)

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2012-7-11 00:52:42 | 显示全部楼层
甲鱼哥, Firefox, Safari, Chrome, Opera都支持text-shadow啊. 只有internet explorer 8之前的版本都不支持 text-shadow~~
另外,Opera 支持 Box阴影啊, 代码是这样滴 : -o-box-shadow:D

评分

参与人数 1鱼币 +5 贡献 +5 收起 理由
小甲鱼 + 5 + 5 3Q,亲~

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2012-7-11 04:19:50 | 显示全部楼层
甲鱼  甲鱼  我不是来水帖的
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2012-7-21 11:01:09 | 显示全部楼层
:lol:lol:lol:lol:lol:lol:lol:lol:lol:lol:lol不错不错不错不错
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2015-5-3 14:39:05 | 显示全部楼层
谢谢小甲鱼老师~~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2016-7-1 14:35:50 | 显示全部楼层
谢谢分享
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 23:21

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表