文本的纯色背景

Question

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

Answer 1

是的，这可能与文字阴影的帮助。像这样：

.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 2

有可能与CSS3：

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

DEMO

Answer 3

这真的是一个表象的问题，所以对于你的用户和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;