阴影效果曾让 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. Oracle EM错误,java.lang.Exception: Exception in sending Request :: null 分类: Oracle 2015-07-08 21:24 44人阅读 评论(0) 收藏

    操作系统:Win7 64bit Oracle: 10.2.0.1.0 很久没有使用EM了,打开一看,居然报错了,出现java.lang.Exception: Exception in sending ...

  2. Miniconda 安装测试

    背景: conda 是一个python的计算环境,minicoda 可以看做是conda的精简版 官网: https://conda.io/miniconda.html 安装: miniconda 支 ...

  3. c#中//注释和///注释的区别 智能注释 显示换行

    ///会被编译,//不会所以使用///会减慢编译的速度(但不会影响执行速度)///会在其它的人调用你的代码时提供智能感知 也是一种注释,但是这种注释主要有两种作用:1.这些注释能够生成一个XML文件. ...

  4. PHP获取MySql新增记录ID值的3种方法

    From: http://www.jb51.net/article/51473.htm 这篇文章主要介绍了PHP获取MySql新增记录ID值的3种方法,一般使用PHP自带函数mysql_insert_ ...

  5. 查看WEB服务器的连接数

    查看WEB服务器的连接数 https://technet.microsoft.com/en-us/sysinternals/bb897437 tcpView

  6. [Learn AF3]第二章 App Framework 3.0的组件View——AF3的驱动引擎

    View:af3中的驱动引擎   组件名称:View     使用说明:按照官方的说法,view组件是af3的“驱动引擎(driving force)”,view是af3应用的基础,一个app中可以包 ...

  7. cordova开发跨平台应用问题随笔记

    iOS下频繁请求地理位置授权 做的某个cordova应用有用到geolocation插件,跑在iOS的时候发现app请求了一次授权,结果webkit还请求了一次授权,不但如此,webkit请求的格式还 ...

  8. 【Ubuntu】全局代理

    配置代理,Ubuntu下是修改/etc/environment,在后面加入: http_proxy="http://****.com:8080/" https_proxy=&quo ...

  9. C# base和this的用法

    /** this关键字* this关键字引用类的当前实例* 注意:静态成员方法中不能使用this关键字,this关键字只能在实例构造函数.实例方法或实例访问器中使用*/ /** base关键字* ba ...

  10. logback 实例

    POM : <!-- log --> <dependency> <groupId>org.slf4j</groupId> <artifactId& ...