css3阴影？CSS阴影详解
大家好，如果您还对css3阴影不太了解，没有关系，今天就由本站为大家分享css3阴影的知识，包括CSS阴影详解的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
CSS阴影详解
设计师常常使用一些独特的字体效果和页面效果，阴影是其中一个，它可以让页面中的文字和元素具有立体的效果，从而被突出出来。比如对于文字阴影，传统的方法可能需要将文字切出来，直接使用图片，如果考虑SEO和网站性能，还可能会使用CSS Sprites等技术将图片整合：
[code]h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...}
h2#title1{background-position:0-30px;}
h2#title2{background-position:0-60px;}
.... [/code][button value="复制代码"]
这是很棘手的事情，拼合图片会花掉你的大量时间，而且为了实现更好视觉效果，你可能还要使用高质量的32位png图片，这又要让你面对该死的IE 6的png透明问题！
事实上，对于文字的阴影效果，我们完全可以用CSS来实现！
可以查看查看demo先。
Text-shadow
text-shadow可以让我们实现完美的文字阴影效果。基本写法：
text-shadow:[颜色 x轴 y轴模糊半径],[颜色 x轴 y轴模糊半径]...
或者
text-shadow:[x轴 y轴模糊半径颜色],[x轴 y轴模糊半径颜色]...
这里的颜色就是阴影的颜色，你可以将颜色写在前面，也可以写在最后。x轴和y轴分别是其阴影的偏移位置，模糊半径可以理解为阴影长度。而且现在大部分浏览器都支持多层阴影，你可以用逗号分开多组设置(当然也可以只是用单个设置)。
示例：
[code]h1{color:#000; background:#333; font:bold 24px/2"微软雅黑",Arial;
text-indent:2em;
text-shadow:black 2px 2px 2px;}[/code][button value="复制代码"]
效果
该属性目前被除IE之外的大部分浏览器支持，对于IE，我们可以使用shadow滤镜来实现：
filter: Shadow(Color='black', Direction='135', Strength='2')
你可能已经注意到，使用shadow滤镜只能定义角度 direction，而不能定义xy轴，z轴也被换成了strength。注意，使用该滤镜的时候，不能够设置背景颜色，否则滤镜将无效！另外如果你的数学不是很好，不太懂三角函数的算法，你可以使用IE的另外一个滤镜：dropshadow：
filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');
好吧，IE总是会拖我们的后腿，不过值得一提的是，IE的这两个滤镜是支持多层阴影的！比如，可以这样写：
filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true')
dropshadow(OffX=2, OffY=2, Color='yelow', Positive='true')
dropshadow(OffX=2, OffY=2, Color='blue', Positive='true');
欲了解更多关于IE的这两个滤镜，请查看：Shadow和 Dropshadow
让我们看一个多层阴影的例子(这里无视了IE)：
[code]h1{font:bold 32px/2 Verdana, Geneva, sans-serif; color:#f39;
text-shadow:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}
[/code][button value="复制代码"]
效果如图：
这里我们使用到了rgba色彩，它是一种在CSS中同时声明颜色及其透明度的一种方法，且被大多数A级浏览器支持的色彩属性（除了IE），了解更多请查看：《RGBa色彩的浏览器支持》——同时我们推荐对于纯色半透明的情况使用这种简单的写法。
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是一样的。
[code]#boxShadow{
...
-webkit-box-shadow:2px 2px 2px black;
-moz-box-shadow:2px 2px 2px black;
...
}
[/code][button value="复制代码"]
事实上，box-shadow和border-radius是很好的搭档：
[code]#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;}[/code][button value="复制代码"]
效果如图：
firefox在3.5版本中才开始支持box-shadow，目前对阴影的渲染还不是很完美。
CSS阴影是CSS3中很有用的特性，我们已经可以在Firefox/webkit/Opera中使用text-shadow，很快也可以在这些浏览器中实现box-shadow。唯独IE特立独行，还在坚持它那蹩脚的滤镜，这真是个杯具。
css3 文字阴影
建议楼主多看看CSS手册。
语法：
text-shadow：none|<shadow>[,<shadow>]*
<shadow>=<length>{2,3}&&<color>?
默认值：none
适用于：所有元素
继承性：有
取值：
none：无阴影
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>：设置对象的阴影的颜色。
<!DOCTYPEhtml>
<htmllang="zh-cn">
<head>
<metacharset="utf-8"/>
<title>text-shadow_CSS参考手册_web前端开发参考手册系列</title>
<style>
.testli{margin-top:10px;}
.test.mormalp{text-shadow:1px1pxrgba(0,0,0,.3);}
.test.blurp{text-shadow:1px1px1pxrgba(0,0,0,.3);}
.test.groupp{text-shadow:1px1px0rgba(255,255,255,1),1px1px2pxrgba(0,85,0,.8);}
</style>
</head>
<body>
<ulclass="test">
<liclass="mormal">
<strong>普通文字阴影</strong>
<p>测试普通文字阴影效果</p>
</li>
<liclass="blur">
<strong>模糊文字阴影效果</strong>
<p>测试模糊文字阴影效果</p>
</li>
<liclass="group">
<strong>多重模糊文字阴影效果</strong>
<p>测试多重模糊文字阴影效果</p>
</li>
</ul>
</body>
</html>
CSS3四周阴影效果怎么做
直接使用box-shadow:5px 5px 10px black inset;属性设置样式样式就可以了。
前两个值（5px 5px）是水平和垂直方向的偏移量，正值阴影就会向左向下偏移，负值反之；
第三个值（10px）是设置模糊距离；
black就是阴影的颜色啦；
最后一个inset是在元素内部创建一个阴影，也就是内阴影了；
删除掉inset就是设置外阴影了
css3阴影和CSS阴影详解的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！