HTML – 在文本周围添加笔划 – 在外面 – 用css？

概述我有以下 HTML和CSS： body { background-color: gray; }h1 { color: white; font-size: 2.5em;} <h1>WHAT CARRER SHOULD YOU HAVE ?</h1> 哪个呈现如下： 我想在它周围添加一个笔划,这意味着围绕这些文本的黑色边框. 我用Google搜索并找到-webkit-text-stroke 我有以下 HTML和CSS：

body { background-color: gray; }h1 {  color: white;  Font-size: 2.5em;}

<h1>WHAT CARRER SHOulD YOU HAVE ?</h1>

哪个呈现如下：

我想在它周围添加一个笔划,这意味着围绕这些文本的黑色边框.
我用Google搜索并找到-webkit-text-stroke,并提出：

body { background-color: gray; }h1 {  color: white;  Font-size: 2.5em;  -webkit-text-stroke: 2px black;}

<h1>WHAT CARRER SHOulD YOU HAVE ?</h1>

但是,效果不是我想要的：

正如您所看到的,似乎在文本中添加了笔划,这使得文本看起来对我来说太薄了.

如何在文本之外进行笔划？

小提琴：http://jsfiddle.net/jpjbk1z7/

PS：只需要webkit支持

解决方法 -webkit-text-stroke不支持将笔划放在文本的外部

正如CSS-Tricks atricle解释的那样：

The stroke drawn by text-stroke is aligned to the center of the text
shape (as is the default in Adobe Illustrator),and there is currently
no option to set the alignment to the insIDe or outsIDe of the shape.
Unfortunately this makes it much less usable,as no matter what Now
the stroke interferes with the shape of the letter destroying the
original type designers intent. A setting would be IDeal,but if we
had to pick one,outsIDe stroke would have been much more useful.

那SVG怎么样？

好吧,它似乎也把中风放在里面 –

FIDDLE

然而,

您可以通过以下方式模拟此效果(取决于您的需要)：

1)将你的字体改为像verdana和

2)使您添加笔划的文本的字体大小略大

body {  background: grey;  Font-family: verdana;}.stroke,.no-stroke {  color: white;  Font-size: 2.5em;}.stroke {  -webkit-text-stroke: 2px black;   Font-size: 2.7em;}

<h1 >WHAT CARRER SHOulD YOU HAVE ?</h1><h1 >WHAT CARRER SHOulD YOU HAVE ?</h1>

总结

以上是内存溢出为你收集整理的HTML – 在文本周围添加笔划 – 在外面 – 用css？全部内容，希望文章能够帮你解决HTML – 在文本周围添加笔划 – 在外面 – 用css？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。