当前位置： 代码迷 >> HTML/CSS >> css影子效果，css3阴影效果，css3文字阴影效果，css阴影效果完美兼容所有浏览器吹牛B的，CSS高级技巧:阴影效果
  详细解决方案

css影子效果，css3阴影效果，css3文字阴影效果，css阴影效果完美兼容所有浏览器吹牛B的，CSS高级技巧:阴影效果

热度：548   发布时间：2013-10-16 11:29:46.0
css阴影效果，css3阴影效果，css3文字阴影效果，css阴影效果完美兼容所有浏览器吹牛B的，CSS高级技巧:阴影效果

css3阴影效果

代码：

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
}

释义为：横向偏移3像素，纵向偏移3像素，模糊4像素，颜色为纯黑。

如果我们把含上面样式的这个class shadow应用到图片上，就会产生如下的效果（截自Firefox3.6）：

css3实现阴影效果图片

对于目前对CSS3支持如狗屎的孤芳自赏的IE浏览器怎么办呢？box-shadow属性对于IE浏览器就像是圣诞树上的彩灯――装饰而已。
好在IE浏览器有个IE shadow滤镜，是IE浏览器私有的一个东西，可以模拟还凑合的盒阴影效果，使用类似于下面的代码：

.shadow {
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
将shadow这个class应用到图片上，结果如下（截自IE6浏览器）：

ie阴影效果图片

虽然效果不及Firefox，chrome等现代浏览器，但是还能凑合着用用。


样式综合如下代码：



.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}



CSS文字阴影效果



上回说到用css模拟图片阴影效果，那么文字有办法吗？

其实在css3中已经有一个text-shadow属性专门来实现这个效果，不过目前只有Webkit (from Safari 3+，chrome), Opera 9.5, Firefox 3.1(pre-Alpha)等几个现代浏览器可以支持该属性，IE系的暂时无法实现该属性。

text-shadow的语法：

text-shadow:color length length length;

color:颜色; length分别按顺序指”X轴方向长度 Y轴方向长度 阴影模糊半径”

正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.

其中任意一个值可以为零也可为空(将做默认处理)

值得注意的是，text-shadow可以应用多组属性，也就是可以如下方法使用：

.text_shadow{0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200}

下面看几个范例：(请使用Webkit (from Safari 3+，chrome), Opera 9.5, Firefox 3.1(pre-Alpha)浏览器运行查看效果。)

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
    <title>文字阴影</title>
<style type="text/css">
<!--
/**--------------
	RESET CSS
--------------**/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
a{text-decoration:none;}
ol,ul {list-style: none;}
table {border-collapse: collapse;border-spacing:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
img{border:none;}
.clearfix:after {content:"\0020";display:block;height:0;clear:both;}
.clearfix{zoom:1;}
body{font-family:"微软雅黑","宋体",Geneva, sans-serif;	font-size:12px;background:#ebebeb;}
/**--------------
	CSS
--------------**/
#wrapper{
	margin:30px 0 30px 150px;
}
#wrapper h2{
	font-size:35px;
	font-weight:bold;
}
#wrapper h1{
	font-size:20px;
	color:#48A890;
	font-family:Georgia;
	font-style:italic;
	margin-bottom:30px;
	text-shadow: 0 1px #fff;
}
h2#test1{
	text-shadow: 1px 1px #40730e;
	color:#92bf30;
}
h2#test2{
	text-shadow: 1px 1px  3px #000;
	color:#676767;
}
h2#test3{
	text-shadow: 0px -1px  #bbb,0 1px #fff;
	color:#e3e1e1;
}
h2#test4{
	text-shadow: -1px -1px 3px #ffb69a,1px 1px 3px #922e09,-1px -1px #ffb69a,1px 1px #922e09;
	color:#e73f00;
}
h2#test5{
	margin-top:40px;
	text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, 2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
	color:#000;
}
-->
</style>
</head>
<body>
	<div id="wrapper">
	<h1>Text Shadow Use CSS</h1>
		<h2 id="test1">1 : This is heading with text-shadow 中文标题</h2>
		<h2 id="test2">2 : This is heading with text-shadow 中文标题</h2>
		<h2 id="test3">3 : This is heading with text-shadow 中文标题</h2>
		<h2 id="test4">4 : This is heading with text-shadow 中文标题</h2>
		<h2 id="test5">5 : Multiple shadows are Hot</h2>
	</div>
</body>
</html>

至于顽固的IE，只能用滤镜来实现类似效果了，下面也顺便介绍一下IE滤镜制作阴影。

IE滤镜的语法为：

filter : progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=sColor , direction=iOffset , strength=iDistance )
其中color为阴影颜色 direction为角度 strength为阴影距离

下面一样看个例子: 

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
    <title>文字阴影IE滤镜版</title>
<style type="text/css">
<!--
/**--------------
	RESET CSS
--------------**/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
a{text-decoration:none;}
ol,ul {list-style: none;}
table {border-collapse: collapse;border-spacing:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
img{border:none;}
.clearfix:after {content:"\0020";display:block;height:0;clear:both;}
.clearfix{zoom:1;}
body{font-family:"微软雅黑","宋体",Geneva, sans-serif;	font-size:12px;background:#ebebeb;}
/**--------------
	CSS
--------------**/
#wrapper{
	margin:30px 0 30px 150px;
}
#wrapper h2{
	font-size:35px;
	font-weight:bold;
}
#wrapper h1{
	font-size:20px;
	color:#48A890;
	font-family:Georgia;
	font-style:italic;
	margin-bottom:30px;
	text-shadow: 0 1px #fff;
}
h2#test1{
	zoom:1;
	filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#40730e);
	color:#92bf30;
}
h2#test2{
	zoom:1;
	filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#000000);
	color:#676767;
}
h2#test3{
	zoom:1;
	filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#ffffff);
	color:#e3e1e1;
}
p#test4{
	zoom:1;
	font-family:"宋体";
	font-size:14px;
	font-weight:bold;
	filter:progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=120, color=#FFFFFF);
	color:#676767;
}
-->
</style>
</head>
<body>
	<div id="wrapper">
	<h1>Text Shadow Use CSS</h1>
		<h2 id="test1">1 : This is heading with text-shadow 中文标题</h2>
		<h2 id="test2">2 : This is heading with text-shadow 中文标题</h2>
		<h2 id="test3">3 : This is heading with text-shadow 中文标题</h2>
        <p id="test4">4 : This is heading with text-shadow 中文标题</p>
	</div>
</body>
</html>


可以看到效果比较差，只有在小字体的时候才能用下。另外要注意要是用滤镜的元素必须触发haslayout

最后把两个方案结合一下即可实现支持大部分浏览器的CSS阴影效果。


<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
    <title>文字阴影</title>
<style type="text/css">
<!--
/**--------------
	RESET CSS
--------------**/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
a{text-decoration:none;}
ol,ul {list-style: none;}
table {border-collapse: collapse;border-spacing:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
img{border:none;}
.clearfix:after {content:"\0020";display:block;height:0;clear:both;}
.clearfix{zoom:1;}
body{font-family:"微软雅黑","宋体",Geneva, sans-serif;	font-size:12px;background:#ebebeb;}
/**--------------
	CSS
--------------**/
#wrapper{
	margin:30px 0 30px 150px;
}
#wrapper h2{
	font-size:35px;
	font-weight:bold;
}
#wrapper h1{
	font-size:20px;
	color:#48A890;
	font-family:Georgia;
	font-style:italic;
	margin-bottom:30px;
	text-shadow: 0 1px #fff;
}
h2#test1{
	text-shadow: 1px 1px #40730e;
	color:#92bf30;
}
h2#test2{
	text-shadow: 1px 1px  3px #000;
	color:#676767;
}
h2#test3{
	text-shadow: 0px -1px  #bbb,0 1px #fff;
	color:#e3e1e1;
}
p#test4{
	text-shadow: 1px 1px 1px #FFFFFF;
	font-family:"宋体";
	font-size:14px;
	font-weight:bold;
	color:#676767;
}
-->
</style>
<!--[if IE]>
<style type="text/css">
h2#test1{
	zoom:1;
	filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#40730e);
}
h2#test2{
	zoom:1;
	filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#000000);
}
h2#test3{
	zoom:1;
	filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#ffffff);
}
p#test4{
	zoom:1;
	filter:progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=120, color=#FFFFFF);
}
-->
</style>
<![endif]-->
</head>
<body>
	<div id="wrapper">
	<h1>Text Shadow Use CSS</h1>
		<h2 id="test1">1 : This is heading with text-shadow 中文标题</h2>
		<h2 id="test2">2 : This is heading with text-shadow 中文标题</h2>
		<h2 id="test3">3 : This is heading with text-shadow 中文标题</h2>
		<p id="test4">4 : This is heading with text-shadow 中文标题</p>
	</div>
</body>
</html>





  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.