Dan*_*ams 2 html css outline stroke
我的最终目标是做出这样的效果： http: //codepen.io/yoksel/pen/XJbzrO（页面底部）。但我什至无法让这个简单的文本大纲发挥作用。
<!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>
该解决方案必须适用于所有主要浏览器。我正在使用谷歌浏览器。如果无法通过这种方式完成描边，请不要建议使用阴影。我无法将阴影变成所需的效果。
该stroke属性存在于 CSS 中，但仅适用于 SVG 元素。有一个-webkit-text-stroke属性可以应用于常规文本元素，但它是非标准的，并且不适用于 Internet Explorer。
要获得您想要的效果，您有 2 个选择：使用非标准属性或将文本包装在 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>| 归档时间： |
|
| 查看次数： |
4967 次 |
| 最近记录： |