css 阴影效果

最新推荐文章于 2024-09-02 12:15:00 发布
最新推荐文章于 2024-09-02 12:15:00 发布
阅读量666 收藏 1
点赞数
分类专栏： CSS 文章标签： css 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>


vuturn
关注
专栏目录
css 阴影 效果_CSS阴影效果
cumtb2002的博客
07-30 1586
css阴影效果 CSS中的阴影效果 (Shadow Effects in CSS) It is always good to make our web pages stylish and beautiful, web pages that would catch users eyes instantly but one gets confused as to how to style his or...
前端必知必会-CSS阴影效果Shadow
qq_24018193的博客
09-01 505
本文介绍了CSS阴影效果的使用，如有问题欢迎私信和评论。
CSS-圆角、阴影、文本图像处理、函数【看这一篇就够了！！！】
最新发布
zheshiyangyang的博客
09-02 1381
-
用 CSS 实现的阴影效果
[橫渡]
10-22 1572
用 CSS 实现的阴影效果原文出自：A List Apart 作者：Sergio Villarreal中文翻译：onestab [2004.02.28] “…假如有一种技术，用 CSS 对任意块级元素灵活地添加阴影，而且能随着内容的大小自动扩展，还要适用于大多数流行的浏览器，那该有多好！不信么？告诉您，只需写几行代码就能做到。” 阴影效果成了平面设计的一个套路，平面设计师把它当作瑞士军
CSS 阴影效果
热门推荐
Dominic_W的博客
05-14 3万+
CSS中，通过text-shadow、box-shadow两个属性分别为文本和元素添加阴影效果。 CSS语法 box-shadow: h-shadow v-shadow blur spread color inset; 向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 h-shadow: 必需。水平阴影的位置，可以为负值 v-shadow:必需。垂直阴影的位置，可以为负值 blur:可选，阴影模糊的
DIV CSS阴影
weixin_33682790的博客
10-15 71
.mydiv{ width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333; filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=3);/*ie*...
【css阴影效果】达到CSS阴影效果（不需要借助任何图像）
04-11
在网页设计中常常要使用到阴影效果，通过阴影效果可以很好的突出一个元素，在 CSS3 出现之前，我们想要为文本或者元素添加阴影效果需要借助图像才能实现，很不方便。而 CSS3 出现之后，我们通过 text-shadow 和 box-...
最新简单 几种常见的CSS阴影效果代码
07-16
CSS阴影效果是为元素添加深度感和立体感的重要手法，使得网页设计更加生动和专业。本文将详细探讨最新、简单且常见的CSS阴影效果代码，以及如何在实践中应用它们。 首先，CSS提供了两种主要类型的阴影：`box-shadow...
css阴影效果实现方法分享
09-25
总的来说，CSS阴影效果是一个强大且灵活的工具，能够提升网页设计的视觉体验。了解并熟练运用这些方法，可以让你的设计更加专业且富有层次感。在实际应用中，记得根据目标用户的浏览器类型来适配相应的CSS代码，确保...
23种css3图片阴影效果
07-19
纯CSS3实现的各种阴影效果，无需图片和js代码即可实现图片、按钮等元素的阴影效果，完全通过样式控制阴影大小、方向和深度，经测试效果相当不错非常酷。
css的阴影效果
blithe影子
02-16 321
设置阴影效果 box-radius：x偏移 y偏移 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]； [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]； <html> <head></head> <style> #main{ height:100px; width:100px; background:#666;...
css阴影效果
遗失在古战场的博客
10-17 1049
实现css阴影效果 .tesr{     width: 96%;     margin-left: 2%;     padding-top: 5%;     margin-top: 5%;     box-shadow: -2px 0 0 #1aad19, //左阴影                                    0 -2px 0
css中的阴影效果
qq_36712191的博客
03-21 453
模型阴影 语法:    第一个值 ：Npx  阴影向水平方向偏移N个像素  正数往右 负数往左. 第二个值 ：Npx  阴影向垂直方向偏移N个像素  正数往下 负数往上. 第三个值 ：羽化大小 （模糊的大小）. 第四个值 ：阴影尺寸(在原有阴影的基础上增加的值). 第五个值 ：颜色 默认值是黑色. 第六个参数： 内外阴影 默认是外阴影 内阴影是inset. 其他: 
CSS3-阴影效果
qq15045846160的博客
03-18 5826
一、给盒子添加阴影。 box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影； 注意： 1、默认情况下是外阴影。 2、阴影扩展是指在原有阴影上继续添加阴影。 3、当box-shadow：水平偏移 垂直偏移 模糊度；时。默认阴影颜色由盒子里面内容颜色决定。 二、给文字添加阴影。 text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色； &lt;!DOCTYPE ht...
css实现阴影效果
cindy_rain的博客
10-29 371
用CSS实现阴影效果//今天写的html的部分的一部分 <div class="main"> <h2>请选择您的身份类型：</h2> </div>//css部分 .main{ width:1003px; min-height:600px; margin:40px auto; padding-bottom:21px; box-shadow:0px 0px
CSS添加阴影效果
weixin_44899144的博客
04-17 3489
CSS添加阴影效果 1、添加文本阴影 在CSS中可以使用text-shadow属性设置带阴影的文本。此属性可设置阴影的像素长度、宽度和模糊的距离以及阴影的颜色。 语法： text-shadow: h-shadow v-shadow blur color; 属性值： ●　h-shadow：设置水平阴影的位置，允许负值。 ●　v-shadow：设置垂直阴影的位置，允许负值。 ●　blu...
shadow现象(类间成员变量重名的解决方式)
alex1997222的博客
08-28 404
如果在父类与子类中出现了重名的标识符,可能会引起错误,这种现象叫做shadow现象 派生类将shadow(隐藏)基类的所有同名成员 class A { public: void foo() { cout &lt;&lt; "test!" &lt;&lt; endl; } }; class B :public A { public: void foo() { cout &...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值