css如何消除字内阴影

html-css06

css如何消除字内阴影,第1张

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}

望采纳!谢谢!

没听过IE重影Bug这个玩意,详细描述下吧...

如果是某排文字在IE下自动重复了一次,你只打了一排字却显示2排相同文字,那是你在html里面写了注释造成的,和Css无关,删除部分或全部注释即可解决(此Bug只出现在IE下)

Css2中:Float浮动bug只有2个,一是IE下的双倍浮动边问题,只需要让浮动元素display:inline即可解决;另一个是Firefox等所谓的标准浏览器下需要在浮动后清除浮动的问题,清理浮动就2个办法,手打很累,你自己百度下答案多多。