img
{filter:none}
这样,页面中的所有图片就不会有发光效果了!
把body的stlye属性删除掉,再把你要发光的字体加入到一个DIV
CSS模拟实现字体内阴影效果。其实,这只是应用了一些小招数,你看了下面的CSS片段也许就会立即明白是怎么回事:),而关键点就是,用RGBA透明色模拟字体内阴影效果。
body{background:#fff}
.inset-text{
font-family:Helvetica,Arial,sans-seriffont-weight:boldfont-size:5em
color:rgba(0,102,204,0.7)
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff
}
原理很简单,text-shadow 始终处于字体之下,所以用 text-shadow 的多重阴影先在字体实色之下模拟出内嵌阴影的效果,然后,通过将字体的透明度降低,达到字体内阴影的模拟效果。当然这种模拟是有局限的,比如,背景色和模拟阴影必须相同,不然就穿帮了,呵呵。其次,在不支持RGBA的浏览器里,不能发挥作用,而且还必须在RGBA之上添加默认颜色以保证老浏览能至少显示实色:
.inset-text{
font-family:Helvetica,Arial,sans-seriffont-weight:boldfont-size:5em
color:#09f
color:rgba(0,102,204,0.7)
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff
}
最后,如果你选中上面那段示例的文本,可以看到很明显的模糊。这在之前也以及提到过,因为多重阴影的作用在选中时依然有效,所以为了文本的可读性,应该将选中时的文本阴影去掉。
-moz-selection{text-shadow:none}
selection{text-shadow:none}
望采纳!谢谢!
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字阴影</title>
<style>
div{
background-color:#EBEBEB
width:500px
height:100px
line-height:100px
color:#E3E1E2
font-size:40px
font-weight:bold
font-family:"Arial Black", Gadget, sans-serif
text-shadow:0 1px 1px rgba(255,255,255,1),
0 -1px 1px rgba(0,0,0,.3)
}
</style>
</head>
<body>
<div>This is heading</div>
</body>
</html>
效果图:
大概就是这样子的,你再调一调就能和你的图片一样了,css3文字阴影效果只有支持css3的浏览器才能显示,比如chrome、Firefox等,IE9以下不支持。