css中的文本阴影密度可获得模糊效果

时间:2013-06-06 09:41:38

标签: css css3

有没有更好的方法为文本阴影提供更大的密度?我遇到的唯一解决方案是在文本上多次重复文本阴影,但这有点草率。我认为IE10支持传播半径,但它是唯一的。

body{
    background:#000
}
h1 {
    font-size: 25px;
    font-family:Arial;
    color: #F90;
    text-shadow: 
        0 0 20px #FFF, 
        0 0 20px #FFF, 
        0 0 20px #FFF, 
        0 0 20px #FFF, 
        0 0 20px #FFF, 
        0 0 20px #FFF, 
        0 0 20px #FFF, 
        0 0 20px #FFF, 
        0 0 20px #FFF, 
        0 0 20px #FFF, 
        0 0 20px #FFF, 
        0 0 20px #FFF, 
        0 0 20px #FFF, 
        0 0 20px #FFF;
}

比较jsfiddle中的工作示例:

http://jsfiddle.net/poselab/jAgF3/3/

http://jsfiddle.net/poselab/pHnTm/

1 个答案:

答案 0 :(得分:0)

我不确定你究竟想要实现@PoseLab,但是如果你检查支持,大多数浏览器都支持文本阴影上的“blur”属性。 caniuse.com

通过从0向上和向下更改模糊,肯定会将密度从纯色更改为更褪色的效果。

可能会做类似

的事情
text-shadow:2px 2px 0 #fff;

JS Fiddle

希望这会有所帮助,你也可以随时使用文本阴影生成器。

CSS3 text shadow generator

P.S(我也道歉,IE9也支持Text-shadow)