文本的固体背景颜色

Question

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

Answer 1

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

你可以text-stroke declaration。不幸的是，它现在只是WebKit。

-webkit-text-stroke:2px white;

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

来自CSS-Tricks：

  

只有外部文本笔划对齐才对我有好处。它的   不幸的是，无论是CSS还是Illustrator，都是不可改变的   默认是居中的。

您可以始终stack up text-shadow declarations向所有方向发挥效果。这比文本描边有点麻烦，但浏览器支持更好（目前）。

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;

Answer 2

是的，有可能在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;}​

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

Answer 3

可以使用CSS3：

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

DEMO