css 阴影效果

最新推荐文章于 2024-04-07 19:38:19 发布
最新推荐文章于 2024-04-07 19:38:19 发布
阅读量643 收藏 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
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 阴影 效果_CSS阴影效果
cumtb2002的博客
07-30 1505
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 实现的阴影效果
[橫渡]
10-22 1511
用 CSS 实现的阴影效果原文出自：A List Apart 作者：Sergio Villarreal中文翻译：onestab [2004.02.28] “…假如有一种技术，用 CSS 对任意块级元素灵活地添加阴影，而且能随着内容的大小自动扩展，还要适用于大多数流行的浏览器，那该有多好！不信么？告诉您，只需写几行代码就能做到。” 阴影效果成了平面设计的一个套路，平面设计师把它当作瑞士军
Css盒子阴影及文本阴影效果总结，中高级前端开发应该要了解
最新发布
m0_74932057的博客
04-07 385
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
CSS 阴影效果
我的博客
05-08 110
CSS 阴影效果。
DIV CSS阴影
weixin_33682790的博客
10-15 48
.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阴影效果，css阴影效果
11-30
css阴影效果
css阴影效果实现方法分享
09-25
本文主要介绍了css阴影效果实现方法，大家参考使用吧，方法很简单，只要把下面的类加到DIV上就可以了
23种css3图片阴影效果
07-19
纯CSS3实现的各种阴影效果，无需图片和js代码即可实现图片、按钮等元素的阴影效果，完全通过样式控制阴影大小、方向和深度，经测试效果相当不错非常酷。
css的阴影效果
blithe影子
02-16 296
设置阴影效果 box-radius：x偏移 y偏移 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]； [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]； <html> <head></head> <style> #main{ height:100px; width:100px; background:#666;...
css阴影效果
遗失在古战场的博客
10-17 1014
实现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 421
模型阴影 语法:    第一个值 ：Npx  阴影向水平方向偏移N个像素  正数往右 负数往左. 第二个值 ：Npx  阴影向垂直方向偏移N个像素  正数往下 负数往上. 第三个值 ：羽化大小 （模糊的大小）. 第四个值 ：阴影尺寸(在原有阴影的基础上增加的值). 第五个值 ：颜色 默认值是黑色. 第六个参数： 内外阴影 默认是外阴影 内阴影是inset. 其他: 
CSS3-阴影效果
qq15045846160的博客
03-18 5776
一、给盒子添加阴影。 box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影； 注意： 1、默认情况下是外阴影。 2、阴影扩展是指在原有阴影上继续添加阴影。 3、当box-shadow：水平偏移 垂直偏移 模糊度；时。默认阴影颜色由盒子里面内容颜色决定。 二、给文字添加阴影。 text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色； &lt;!DOCTYPE ht...
css实现阴影效果
cindy_rain的博客
10-29 345
用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 3420
CSS添加阴影效果 1、添加文本阴影 在CSS中可以使用text-shadow属性设置带阴影的文本。此属性可设置阴影的像素长度、宽度和模糊的距离以及阴影的颜色。 语法： text-shadow: h-shadow v-shadow blur color; 属性值： ●　h-shadow：设置水平阴影的位置，允许负值。 ●　v-shadow：设置垂直阴影的位置，允许负值。 ●　blu...
CSS的阴影
榕城候佳人的博客
03-21 1854
🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简介：本文介绍CSS的阴影效果。知识学习内容来自b站的@黑马程序员的视频CSS的阴影效果包括盒子阴影和文字阴影两种🔥。
【CSS】盒子模型阴影 ( box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影； )
热门推荐
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-20 1万+
一、盒子模型阴影 1、标准阴影示例 2、水平阴影示例 3、垂直阴影示例 5、模糊距离示例 6、阴影尺寸示例 7、阴影颜色示例 8、内外阴影示例 二、常用代码示例

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值