文字文本的描边效果特效自己亲自做的有大用

CSS 文字的发光效果通过 text-shadow 实现起来很方便的。

1 2	`text-shadow:` `1px` `0` `1px` `#8B4513,` `0` `1px` `1px` `#8B4513,` `0` `-1px` `1px` `#8B4513,` `-1px` `0` `1px` `#8B4513;`

在 Firefox, Chrome, Opera, Safari 中的效果：

看上去这几款浏览器都支持。不过就是在 Chrome 里面，可以看见出来的效果并不好，奇怪的一点是为什么它的模糊会往里发展了，开始还以为 webkit 都这样，看了看 Safari，表现挺好的，边缘比 Firefox 还要锐利。

几经尝试，终于找到可以让 Chrome 也一样表现犀利的办法。通过观察可以得知在无模糊的情况下，也就是文本描边效果，各浏览器里的表现是一致的。

1 2	`text-shadow:` `1px` `0` `#8B4513,` `0` `1px` `#8B4513,` `0` `-1px` `#8B4513,` `-1px` `0` `#8B4513;`

而又知道，shadow 效果是可以叠加的，于是就得出以下的写法，在描边 + 发光。下面的是非ie绝对效果好

1

2

3

4

text-shadow: 1px 0 0 #8B4513, 0 1px 0 #8B4513, 
    0 -1px 0 #8B4513, -1px 0 0 #8B4513, 
    1px 0 1px #8B4513, 0 1px 1px #8B4513, 
    0 -1px 1px #8B4513, -1px 0 1px #8B4513;

还有一点要注意的，必须是先描边，再发光。反过来，效果惨不忍睹。下图。

搞不清楚怎样的效果才是标准的，但 Chrome (测试用版本为 8.0.552.210 beta)目前的实现视觉上是不行的。

上面忽略 IE 的情况。IE 是可以通过滤镜来实现的。不过由于 dropshadow 没有 blur 选项，实际效果只有描边没有发光。下面的是ie绝对效果好

1

2

3

4

filter: Dropshadow(offx = 1, offy = 0, color = #8B4513) 
    Dropshadow(offx = 0, offy = 1, color = #8B4513) 
    Dropshadow(offx = 0, offy = -1, color = #8B4513) 
    Dropshadow(offx = -1, offy = 0, color = #8B4513);

只要把非ie和IE两种样式全用上去就好了
来自 http://leegorous.net/blog/2010/12/01/css-text-shadow/

下面描边的效果是自己亲自做的肯定是好的
<span style="position:absolute;display:block;left:116px;top:168px;height:38px;color:#ff0000;text-shadow: 1px 0 0 #ffffff, 0 1px 0 #ffffff,    0 -1px 0 #ffffff, -1px 0 0 #ffffff,    1px 0 1px #ffffff, 0 1px 1px #ffffff,    0 -1px 1px #ffffff, -1px 0 1px #ffffff;filter: Dropshadow(offx = 1, offy = 0, color = #ffffff)    Dropshadow(offx = 0, offy = 1, color = #ffffff)    Dropshadow(offx = 0, offy = -1, color = #ffffff)    Dropshadow(offx = -1, offy = 0, color = #ffffff); font-size:21px;font-family:'微软雅黑';font-weight:600;" >全国统一咨询热线: {dede:global.looyuzxlx /}</span>

下面的效果不理想
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本的描边效果</title>
<style type="text/css">
p{
   padding:50px;
   font-family:Verdana, Geneva, sans-serif;
   font-weight:bold;
   font-size:36px;
   background-color:#ddd;
   color:#000;
   /*普通的描边*/ /*向左阴影*//*向上阴影*//*向右阴影*//*向下阴影*/
   /*
   text-shadow:-3px 0px 1px #fff,
               0px -3px 1px     #fff,
               3px 0 1px    #fff,
               0px 3px 1px    #fff
       */
}
.yingying{
/*text-shadow:x位移 y位移模糊程度颜色 */
    -webkit-text-shadow:#fff 3px 0 1px,#fff 0 3px 1px,#fff -3px 0 1px,#fff 0 -3px 1px;
    -moz-text-shadow:#fff 3px 0 1px,#fff 0 3px 1px,#fff -3px 0 1px,#fff 0 -3px 1px;
    text-shadow:#fff 3px 0 1px,#fff 0 3px 1px,#fff -3px 0 1px,#fff 0 -3px 1px;
    *filter: Glow(Color=#fff, Strength=3);
}
</style>
</head>
<body>
<p class="yingying">文本的描边效果</p>
</body>
</html>

You are here

CSS 文字发光效果

只要把非ie和IE两种样式全用上去就好了
来自 http://leegorous.net/blog/2010/12/01/css-text-shadow/

友情链接

搜索表单

用户登录

You are here

文字 文本的描边效果 特效 自己亲自做的 有大用

只要把非ie和IE两种样式全用上去 就好了来自 http://leegorous.net/blog/2010/12/01/css-text-shadow/

友情链接

文字文本的描边效果特效自己亲自做的有大用

只要把非ie和IE两种样式全用上去就好了
来自 http://leegorous.net/blog/2010/12/01/css-text-shadow/