css如何消除字内阴影

html-css014

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}

望采纳！谢谢！

你这种情况比较复杂!都是滤镜做的

字体动感模糊窗口--图层，右击字体图层，删格式化文件，滤镜--模糊--动感模糊，选择角度和距离，角度表示你动感模糊的方向，距离越大动感模糊效果越厉害

图片雾化在你原有图层上新建图层保证前景色和背景色为黑白，滤镜--渲染--云彩，将图层模式正常改为滤色即可。。如果觉得雾化太重可以适当降低不透明度

如果不想动复制过来的内容，（可能内容比较多，也不好找，改动又可能会影响其他）

那就将你自己写的div 都添加一个class， 设置文字格式，如font-size,font-color等。

<div class="norm">blabla</div>

style里可能需要这些：

.norm {

font-family:Verdana, Geneva, sans-serif

size:12px

color:black

opacity:1

moz-opacity:1

filter:false

}