我有以下 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>
然而,效果并不是我想要的:
如您所见,笔画似乎是添加在内部文本中的,这让文本看起来太细了。
我怎样才能在文字之外画笔划?
fiddle :http://jsfiddle.net/jpjbk1z7/
PS:只需要webkit支持
最佳答案
对于文本阴影模拟的平滑外部笔划,使用以下 8 轴阴影:
text-shadow:
-1px -1px 0 #000,
0 -1px 0 #000,
1px -1px 0 #000,
1px 0 0 #000,
1px 1px 0 #000,
0 1px 0 #000,
-1px 1px 0 #000,
-1px 0 0 #000;
对于自定义,您可以改用此 SASS 混合(尽管更改大小确实会对渲染产生副作用):
@mixin stroke($color: #000, $size: 1px) {
text-shadow:
-#{$size} -#{$size} 0 $color,
0 -#{$size} 0 $color,
#{$size} -#{$size} 0 $color,
#{$size} 0 0 $color,
#{$size} #{$size} 0 $color,
0 #{$size} 0 $color,
-#{$size} #{$size} 0 $color,
-#{$size} 0 0 $color;
}
这提供了非常平滑的行程,没有遗漏零件,就像在 4 轴解决方案上一样。
关于html - 在文本周围添加描边 - 在外面 - 使用 css?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26634201/