0

是否可以使用 CSS3 或 jQuery 创建这种效果？

图像

4

3 回答 3

2

这确实是一个表现问题，所以为了您的用户和渐进增强，这是一个由 CSS 而不是 JavaScript 更好地处理的任务。

你可以做一个text-stroke声明。不幸的是，它现在只支持 WebKit。

-webkit-text-stroke:2px white;

另外，在您的具体示例中，您需要在文本之外对齐笔划，这目前是不可能的。

来自CSS 技巧：

对我来说，只有外部文本笔画对齐看起来一点都不错。不幸的是，对于 CSS 和 Illustrator 来说，不可更改的默认值是居中的。

您总是可以在各个方向堆叠text-shadow声明以实现此效果。这比 text-stroke 有点混乱，但浏览器支持更好（目前）。

text-shadow:  0 1px 0 white, 0 2px 0 white,
              1px 0 0 white, 2px 0 0 white,
              -1px 0 0 white, -2px 0 0 white,
              0px -1px 0 white, 0 -2px 0 white;
于 2012-11-16T15:11:01.403 回答
1

是的，可以在 text-shadow 的帮助下实现。像这样：

.MyDiv{
 background:green;
 padding:20px 20px;
 color:black;
 text-shadow:0px 0px 3px white, 
                0px 0px 4px white, 
                0px 0px 5px white,
                0px 0px 6px white, 
                0px 0px 7px white,
                0px 0px 8px white, 
                0px 0px 9px white,
                1px 1px 2px white, 
                1px 1px 3px white,
                -1px -1px 2px white, 
                -1px -1px 3px white,
                -2px -2px 2px white,
                -2px -2px 3px white;}​

这是一个演示。您可以继续添加定义以增强效果。

于 2012-11-16T15:05:44.207 回答
0

使用 CSS3 是可能的：

#element {
    color: red;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

演示

于 2012-11-16T15:06:55.860 回答