阴影效果曾让 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);

HTML5 css3 阴影效果的更多相关文章

  1. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  2. 使用HTML5/CSS3制作便签贴

    利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面,效果图如下: (注:图里的文字纯属杜撰,搞笑目的,如有雷同,纯属巧合,谢谢!) 注:该效果可以在Safari, Chrome,Fi ...

  3. 2019.4.25 表格表单与HTML5 && CSS3

    目录 表格 标签 属性 表格间距离 表格的内边距 表格的边框 样式 边框合并 行合并 列合并 display 表单 标签 属性 提交的网址 请求方式 input相关 扩大响应范围 字符 密码 单选框 ...

  4. 【Web前端HTML5&CSS3】08-盒模型补充

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 盒模型补充及田径场实战 1. 盒子大小 2. 轮廓 3. 阴影 4. 圆角 圆 椭圆 盒模型补充及田径场实战 1 ...

  5. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  6. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  7. 01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...

  8. 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  9. 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

随机推荐

  1. C# EF Code First Migrations数据库迁移

    1.EF Code First创建数据库 新建控制台应用程序Portal,通过程序包管理器控制台添加EntityFramework. 在程序包管理器控制台中执行以下语句,安装EntityFramewo ...

  2. Unreal发展史

    Unreal发展史 引子 四年前的一个深夜,或者说是一个早晨,Unreal的传奇开始了.它发生在马里兰州一个不起眼的市镇Rockvill,在一套公寓大楼里回响起一支墨西哥流浪乐队的曲子,那里住着Epi ...

  3. extJS 中 ext.data 介绍

    ext.data 最主要的功能是获取和组织数据结构,并和特定控件联系起来,于是,Ext.data成了数据的来源,负责显示数据. Ext.data在命名空间中定义了一系列store.reader和pro ...

  4. CentOS6.8手动安装MySQL5.6

    众所周知,mysql5.7推出后有很多没有填好的坑,对于老的系统和项目兼容性也存在问题,所以现在普遍的web项目还是应该跑在centos6.8+mysql5.6的环境之下,今天主要说一下mysql5. ...

  5. 处理执行sql语句

    sqlplus / as sysdba @1.sqlsqlplus / as sysdba @2.sqlsqlplus / as sysdba @3.sql

  6. C# winform开发嵌套Chrome内核浏览器(WebKit.net)开发(一)

    https://www.cnblogs.com/Maxq/p/6566558.html WebKit.net是对WebKit的.Net封装, 使用它.net程序可以非常方便的集成和使用webkit作为 ...

  7. sql server 存储过程基础知识

    转自家园大哥博文http://www.cnblogs.com/jiajiayuan/archive/2011/06/15/2081201.html 什么是存储过程呢?存储过程就是作为可执行对象存放在数 ...

  8. Dubbo -- 系统学习 笔记 -- 示例 -- 启动时检查

    示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 启动时检查 Dubbo缺省会在启动时检查依赖的服务是否可用,不可用时会抛出异常,阻止Spring初始化完成,以便上线时,能及早发 ...

  9. 8 -- 深入使用Spring -- 3...1 Resource实现类ServletContextResource

    8.3.1 Resource实现类------ServletContextResource:访问相对于ServletContext路径下的资源的实现类. 4.访问应用相关资源 Spring提供了Ser ...

  10. Spring JDBC入门

    Spring将替我们完成所有使用JDBC API进行开发的单调乏味的.底层细节处理工作. 操作JDBC时Spring可以帮我们做这些事情: 定义数据库连接参数,打开数据库连接,处理异常,关闭数据库连接 ...