阴影效果曾让 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# 指定ip段生成ip地址

    private void button1_Click(object sender, EventArgs e) { string StartIp = ""; string EndIp ...

  2. 在Centos7下发布.NET CORE项目[转]

    1.安装安装前准备开发环境 编译类库:yum -y install gcc make gcc-c++ openssl-devel 系统信息: CentOS Linux release 7.2.1511 ...

  3. git解决冲突(rebase版)

    当使用git rebase碰到冲突时, git rebase <Remote Branch>/<Your Branch> 信息如下: error: Failed to merg ...

  4. Nginx防盗链 Nginx访问控制 Nginx解析php相关配置 Nginx代理

     

  5. NetLimiter网速测试小坑

    在涉及到网络下载或者上传时,需要对各种不同的网络环境进行模拟验证,这时就需要一种可以随意限制指定进程网速的软件,经过同事推荐,发现NetLimiter这款软件很不错,界面直观,可任意设置上传下载速度, ...

  6. Java编程思想学习笔记——字符串

    前言 字符串操作是计算机程序设计中最常见的行为. 不可变String String对象是不可变的 重载"+"与StringBuilder String对象是不可变的,可以给Stri ...

  7. sql产生随机数

    使用RAND(),结果是类似于这样的随机小数:0.615942003695649 SELECT FLOOR(RAND()*N) ---生成的数是这样的:12.0  SELECT CAST(FLOOR( ...

  8. unity, WaterProDaytime注意事项。

    一,多个WaterProDaytime不要公用material. 原因是:水面material的shader(FXWaterPro.shader)引用了reflectionTexture,而水面1的r ...

  9. 用Python写简单的爬虫

    准备: 1.扒网页,根据URL来获取网页信息 import urllib.parse import urllib.request response = urllib.request.urlopen(& ...

  10. Python的Beautiful Soup简单使用

    Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据 Beautiful Soup提供一些简单的.python式的函数用来处理导航.搜索.修改分析树等功能 它是一个工具箱, ...