首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

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

2013-10-16 
css阴影效果,css3阴影效果,css3文字阴影效果,css阴影效果完美兼容所有浏览器吹牛B的,CSS高级技巧:阴影效果

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

css3阴影效果

代码:

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

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


样式综合如下代码:

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 lengthlength;

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

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

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

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

<!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>





热点排行