为什么这个简单的HTML CSS文本笔画不工作？

我的最终目标是做出如下效果：http://codepen.io/yoksel/pen/XJbzrO（页面底部）。但我甚至无法得到这个简单的文本大纲的工作。为什么这个简单的HTML CSS文本笔画不工作？

<!DOCTYPE html> 

<html lang = "en-US"> 
    <head> 
    <title> Test </title> 
    <style> 
     #title { 
      color: blue; 
      stroke: red; 
      stroke-width: 2px; 
     } 
    </style> 
    </head> 

    <body> 
    <h1 id="title">This is some text</h1> 
    </body> 
</html>

该解决方案必须适用于所有主流浏览器。我正在使用Google Chrome。如果笔画不能这样做，请不要建议使用阴影。我无法将阴影变成理想的效果。

来源

2016-07-13 Daniel Williams

你知道，那支笔使用svg-s –

@Bálint我是新来的HTML和CSS，我不确定这意味着什么。 –

SVG是使用代码释放矢量图形的元素。笔画是一个专属财产 –

stroke属性存在于CSS中，但它只适用于SVG元素。有一个-webkit-text-stroke属性可以应用于常规文本元素，但它不标准，并且在Internet Explorer上不起作用。

要获得您要查找的效果，您有两个选择：使用非标准属性或将文本包装到SVG元素中。

h1 { 
 
    color: blue; 
 
    -webkit-text-stroke: 2px red; 
 
} 
 
text { 
 
    fill: blue; 
 
    stroke: red; 
 
    stroke-width: 2px; 
 
    font-size:2em; 
 
    font-weight: bold; 
 
}

<h1>Nonstandard -webkit-text-stroke</h1> 
 
<svg> 
 
    <text text-anchor="top" y="50%">SVG Element</text> 
 
</svg>

来源

2016-07-13 22:50:41

@Bálint - http://caniuse.com/#feat=svg –

对不起，我最初的帖子是想要发布此消息在被删除 –

您正在尝试的SVG属性 “中风” 适用于HTML标记。这是你的问题。

您可以将您的文本转换为svg对象，然后基本上从该代码笔复制效果，它应该工作正常。像这样的SVG，只要您坚持笔画和一些关键帧动画，就可以符合跨浏览器的要求。

唯一的担心是你需要为seo原因制作其他你的h1标签。

我不打算创建一个工作示例，因为您已经有一个来自代码笔。

来源

2016-07-13 22:52:18 nordicnomad

为什么这个简单的HTML CSS文本笔画不工作？

回答

相关问题