跨浏览器实现盒阴影(box-shadow)效果
现在流行的设计里总是使用了大量的阴影,看看Vista、win7里夸张的box阴影,mac里的阴影比比皆是。CSS3的box-shadow属性可以让我们轻松实现图层阴影效果,使我们可以不再总是依赖于使用图片。
实现盒模型阴影的综合代码:
/*Internet Explorer*/
background:#fff; /*Internet Explorer 8 */ -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=0,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=90,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=180,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=270,strength=6)"; /*低于Internet Explorer 版本8*/ *filter: progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=0, strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=90, strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC direction=180, strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=270, strength=6); /*标准浏览器*/
box-shadow:0px0px6px#CCC;
Shadow滤镜必须配合background属性一起使用,否则该滤镜失效
在IE8中,-ms-filter是filter的别名,两者区别是-ms-filter的属相值必须被单引号或双引号包围,而filter中则不是必须,而在IE8之前的版本中,filter的属性值必须不被单引号或双引号包围。
Shadow滤镜的基本语法:
filter:Shadow(Color=color,Direction=direction,strength=strength)
- color代表投影的底色,该数值是用英文字母来代替的, 例如投影底色是蓝色的话,就应该设置color=blue。
- direction参数是用来设置投影方向的,如果该数值是0的话,就代表垂直投影,此外该数值45度为单位,它的默认值是向左的270度。
- strength设置或检索以对象为基准的在运动方向上的向外扩散距离。
box-shadow的基本语法:
box-shadow:<length><length><length>||<color>
box-shadow:X轴位移 Y轴位移 阴影大小 阴影颜色
在低于Firefox4、Chrome10的浏览器中实现阴影效果需要添加:
-moz-box-shadow: 0px 0px 6px #CCC; -webkit-box-shadow: 0px 0px6px #CCC; 连接:http://www.douban.com/note/232931620/
跨浏览器实现盒阴影(box-shadow)效果的更多相关文章
- 跨浏览器实现placeholder效果的jQuery插件
曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/java ...
- CSS3伸缩盒Flexible Box
这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的 ...
- CSS3 盒阴影(box-shadow)详解
CSS3 的 box-shadow 有点类似于 text-shadow,只不过不同的是 text-shadow 是对象的文本设置阴影,而 box-shadow 是给对象实现图层阴影效果.本文我们搁下I ...
- 转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解
目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果
- 跨浏览器开发:CSS
理解CSS盒子模型 如果不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE 浏览器.CS ...
- 转载于山边小溪的博客--编写跨浏览器兼容的 CSS 代码的金科玉律
http://www.cnblogs.com/lhb25/archive/2010/06/19/1760786.html 原始网页 作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很 ...
- 实现跨浏览器html5表单验证
div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...
- OpenGL阴影,Shadow Volumes(附源程序,使用 VCGlib )
实验平台:Win7,VS2010 先上结果截图: 本文是我前一篇博客:OpenGL阴影,Shadow Mapping(附源程序)的下篇,描述两个最常用的阴影技术中的第二个,Shadow Volu ...
- jQuery插件:跨浏览器复制jQuery-zclip
jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题.jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe F ...
随机推荐
- Asp.Net 自定义控件实现图片的上传,浏览,删除功能
4月的时候公司比较闲,就想着自己做点东西,其实主要是为了更加熟悉.Net,毕竟接触的时间不长,趁着有时间想提高提高.不过当我做到图片上传这个功能的时候,就有些停滞不前了,连续写了两天也达不到自己想要的 ...
- javascript面向对象实例
非私有属性 function Student(name, gender, age, grade, teacher){ this.name = name; this.gender = gender; t ...
- javascript正则表达式简介
javascript正则表达式 javascript正则表达式 regular expression是一个描述字符模式的对象: ECMAScript中的RegExp类表示正则表达式: String ...
- HTTP Post请求过程详解
摘要: HTTP(HyperText Transfer Protocol),超文本传输协议,是一个客户端和服务器端请求和应答的标准(TCP),客户端是终端用户,服务器端是网站. HTTP是基于Sock ...
- 设计模式 单件-Singleton
单件模式 Singleton 什么时候使用?当需要独一无二的对象时,请想起他. 举例:线程池(threadpool),缓存(cache),对话框,处理偏好设置和注册表(registry)的对象,驱动程 ...
- IE对toLocaleString小数位处理
在js中对数值的格式化经常会用到四舍五入.保留小数位数.百分制格式化,分别会用到以下方法 <script type="text/javascript"> var n = ...
- Python线程
原文出处: AstralWind 1. 线程基础 1.1. 线程状态 线程有5种状态,状态转换的过程如下图所示: 1.2. 线程同步(锁) 多线程的优势在于可以同时运行多个任务(至少感觉起来是这样). ...
- 浅谈w3c标准
#浅谈w3c标准 ##w3c标准是什么 w3c标准包括多个方面,官方是从应用角度分的,相关的文档可以戳[这里](http://www.w3.org/standards/).如果从WEB技术角度,可以分 ...
- HW7.13
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- 构造数组的MaxTree
题目 一个数组的MaxTree定义: 数组必须没有重复元素 MaxTree是一棵二叉树,数组的每一个值对应一个二叉树节点 包括MaxTree树在内且在其中的每一棵子树上,值最大的节点都是树的头 给定一 ...