博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5 css3 阴影效果
阅读量:6818 次
发布时间:2019-06-26

本文共 808 字,大约阅读时间需要 2 分钟。

阴影效果曾让 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 实现透明度

 

border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;-webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px;background: #EEFF99;behavior: url(/PIE.htc);

 

posted on
2013-12-19 14:17 阅读(
...) 评论(
...)

转载于:https://www.cnblogs.com/william-lin/p/3482126.html

你可能感兴趣的文章
【299天】跃迁之路——程序员高效学习方法论探索系列(实验阶段57-2017.12.01)...
查看>>
对象的点查询和中括号查询
查看>>
一行代码搞定人脸识别
查看>>
python3进程和线程
查看>>
【quickhybrid】Android端的项目实现
查看>>
Webpack3简单入门1
查看>>
好的代码可以自己说话!
查看>>
css揭秘笔记——用户体验
查看>>
【287天】每日项目总结系列025(2017.11.19)
查看>>
对于“不用setInterval,用setTimeout”的理解
查看>>
JavaScript设计模式--工厂模式
查看>>
前端开发者搭建自己的博客
查看>>
storm集群安装与部署
查看>>
tomcat
查看>>
微信原图泄露的只能是 Exif ,你的隐私不在这!!!
查看>>
在 V8 中从 JavaScript 到 C++ 的类型转换
查看>>
升级Python导致的yum,pip报错解决方案
查看>>
leetcode 342. Power of Four
查看>>
【Node断言assert】
查看>>
python 多继承
查看>>