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

  1. border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;
  2. -webkit-border-radius: 8px;
  3. -moz-border-radius: 8px;
  4. border-radius: 8px;
  5. -webkit-box-shadow: #666 0px 0px 10px;
  6. -moz-box-shadow: #666 0px 0px 10px;
  7. 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. Python——eventlet.backdoor

    eventlet.backdoor 是正在运行中的进程内的 Pyhon 交互解释器. 该模块便于检测一个长期运行进程的运行状态,提供了一种可以不阻塞应用正常操作的 Pyhon 交互解释器,从而极大地方 ...

  2. iOS笔记UI--使用storyboard加入约束

    申明:此为本人学习笔记,若有纰漏错误之处的可留言共同探讨 可视化的搭建UI效率是很高的.所以官方苹果也是很推荐的.那么我们来学一学怎样利用系统自带的故事版(storyboard)来搭建UI.可视化搭建 ...

  3. YII2常用数据库操作

    //1.简单查询 $admin=Admin::model()->findAll($condition,$params); $admin=Admin::model()->findAll(&q ...

  4. 2013——M笔试南京——程序

    迄今只参加了M南京笔试,可惜自己不是计算机出身,还有好多东西得学啊…… M的最后一题是编程: 输入:单链表L0.L1.L2……Ln-1.Ln,将链表变为:L0.Ln.L1.Ln-1.L2…… 算法: ...

  5. Java编程思想学习笔记——访问权限修饰词

    几种访问权限修饰词 public,protected,private,friendly(Java中并无该修饰词,即包访问权限,不提供任何访问修饰词) 使用时,放置在类中成员(域或方法)的定义之前的,仅 ...

  6. vue实现文章内容过长点击阅读全文功能

    直接上代码: html: <div class="bodyFont clearfloat" id="bodyFont" ref="bodyFon ...

  7. vue、vuex、iview、vue-router报错集锦与爬坑记录

    1.vue报错: 没安装 less-loader css-loader style-loader      可能的很大原因:没安装less 2.vuex报错:Computed property &qu ...

  8. vs2010中 js的intellisense(智能提示) 和 Snippets(代码块)

    关于智能提示vs2008和vs2010都是很强大了!但是很多我们知道但是也没有怎么合理应用,真是可惜了啊,如果合理用起来那么会提高我们的开发效率和减少出错几率哦,如果没有智能提示,我想我会疯的. 因为 ...

  9. python 使用循环生成list

    #-*- coding:UTF-8 -*- squares=[] for x in range(10): squares.append(x**2) print squares #[0, 1, 4, 9 ...

  10. 二维码解析:使用 JavaScript 库reqrcode.js解析二维码

    上次使用QRCode.js可以来生成二维码,但是我没有找到有文档说明可以对存在的二维码进行扫描解析其中的内容. 幸亏查找到了可行的解决方案,而且很好使哦!就是reqrcode.js 地址:https: ...