CSS阴影详解（2）
作者：神采飞扬 来源：前端观察 发布时间：2009-12-04 18:31:00
text-shadow的浏览器兼容性
目前text-shadow被Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5支持，IE不支持。需要注意的是，Safari只有4.0才支持多层阴影。
IE各个版本都不支持text-shadow；
Opera 9.5+支持最多6-9层阴影，并使用CSS2渲染顺序(最先定义的阴影在最下面)。而且出于性能的原因，模糊半径被限制到100px；
Gecko (Firefox)理论上支持无限层text-shadows (不过不建议尝试) 并遵循新的CSS3渲染顺序(最先定义的阴影在最上面)；
Safari 1.1-3.2只支持单层text-shadow (只显示第一个逗号之前的声明而无视后面的)。Safari 4.0+才支持多层阴影以及新的CSS3渲染顺序；
box-shadow
先来说IE，IE不支持box-shadow属性，但是上面提到的两个滤镜都可以用来实现阴影效果。这也就是说，IE并没有把文字阴影和盒子阴影区分！这就会出现一些问题：元素中的文字会继承元素的阴影设置。但是如果你不定义该元素的background和border，就只会出现文字阴影，如果只定义background属性而不定义border，就只会出现盒子阴影，文字不会出现阴影；而如果只定义了border属性而不定义background，就即会出现盒子阴影，内容文字及图片也会出现阴影。有兴趣的同学可以折腾一下。
好了，现在让我们忘了IE，来看一看box-shadow。事实上，了解了text-shadow之后，box-shadow就很好理解了，目前只有firefox和safari/chrome通过私有属性支持box-shadow属性。而Opera浏览器虽然目前还不支持该属性，但是在其文档中提到下一个版本的引擎Presto 2.3（目前最新版的Opera 10.10的引擎是Presto 2.2.15）中将会支持 box-shadow，那就让我们慢慢等待吧。
box-shadow的语法和text-shadow是一样的。
#boxShadow{
...
-webkit-box-shadow:2px 2px 2px black;
-moz-box-shadow:2px 2px 2px black;
...
}
事实上，box-shadow和border-radius是很好的搭档：
#boxShadow1{-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px solid ddd;
-webkit-box-shadow:0 0 10px black;
-moz-box-shadow:0 0 10px black;
padding:10px;}
效果如图：
firefox在3.5版本中才开始支持box-shadow，目前对阴影的渲染还不是很完美。
总结
CSS阴影是CSS3中很有用的特性，我们已经可以在Firefox/webkit/Opera中使用text-shadow，很快也可以在这些浏览器中实现box-shadow。唯独IE特立独行，还在坚持它那蹩脚的滤镜，这真是个杯具。
demo地址：cssshadow.htm
0
投稿猜你喜欢
- 前言最近将使用爬虫爬取的链接保存到 mysql 数据库中时，发现我将链接使用 json_encode 保存时候，在数据库中却显示了转义字符，
首先看看Vue文档里关于实例生命周期的解释图那么下面我们来进行测试一下<section id="app-8">- 目录前言数据结构常规实现string转[]byte[]byte转string高效实现性能测试总结前言当我们使用go进行数据序列化或反序列化操
- 如图:其中Num是自增长列,Operation是分类标签,count是汇总数据 代码如下:select Num=row_numb
- 本文实例为大家分享了python字符串循环左移的具体代码，供大家参考，具体内容如下字符串循环左移给定一个字符串S[0…N-1]，要求把S的前
- 前言本文将教你如何使用YOLOV3对象检测器、OpenCV和Python实现对图像和视频流的检测。用到的文件有yolov3.weights、
- 全局作用域下this;当在全局作用域中使用 this,它指向全局对象。这里详细介绍下全局对象：全局对象(Global object) 是在进
- 本文实例讲述了Python切片操作。分享给大家供大家参考，具体如下：我们基本上都知道Python的序列对象都是可以用索引号来引用的元素的，索
- 在php中判断一个文件或目录是否存在，大家通常都会想到is_file和file_exists两个函数。但这两个函数再判断一个远程url文件是
- 在SQL Server 2005中，它的另外一个强大的新特点是数据库快照。数据库快照是一个数据库的只读副本，它是数据库所有数据的映射，由快照
- 本文实例讲述了Python设计模式之备忘录模式原理与用法。分享给大家供大家参考，具体如下：备忘录模式(Memento Pattern):不破
- Declare @Id varchar(20) Declare @Name varchar(20) Declare Cur Cursor F
- 我的风格，废话不多说了，直接给大家贴代码了，并在一些难点上给大家附了注释，具体代码如下所示：#!/usr/bin/env python#-*
- 本次分享将介绍如何在Python中使用Pandas库实现MySQL数据库的读写。首先我们需要了解点ORM方面的知识ORM技术对象关系映射技术
- Numpy、Pandas是Python数据处理中经常用到的两个框架，都是采用C语言编写，所以运算速度快。Matplotlib是Python的
- 下面这段代码，你知道有哪些错误吗：var g_bar = "bar";function foo(container, c
- 本文实例为大家分享了python读取视频流提取视频帧的具体代码，供大家参考，具体内容如下方法一：通过imageio库和skimage库1.
- 本文实例讲述了Python实现的微信公众号群发图片与文本消息功能。分享给大家供大家参考，具体如下：在微信公众号开发中，使用api都要附加ac
- 本文实例为大家分享了JavaScript实现alert弹框的具体代码，供大家参考，具体内容如下因本人水平有限，不足之处还望大家指正。先上图：
- vue-property-decorator这个组件完全依赖于vue-class-component.它具备以下几个属性:@Componen
