如何在 javascript 中为 html 样式添加描边？

Question

我有一个锁屏小部件，它使用 .js 文件来设置时钟元素的样式。问题是，根据墙纸的不同，时钟的颜色有时很难看清（深色背景上的黑色）。我找到了改变时钟文本颜色的元素，但这还不够。我希望能够为其添加笔触，使其具有厚度和双色。这样不管是什么背景都看得一清二楚

实际元素是这样的：

var elements = {
    "zclock": {
        "z-index": 2,
        "color": "gray",    <--- This changes color of clock text
        "webkit-text-stroke-width": "3px",
        "font-family": "sanfranlight",
        "position": "absolute",
        "font-size": "51px",
        "top": 0,
        "left": 1,
        "width": "119px",
        "text-align": "right",
        "font-weight": "100"
    },
    <omitted rest>
    };

我试过使用名为 -webkit-text-stroke-width 的东西，但没有用。也许我输入错误，因为它只在在线示例的 css 文件中引用过。

我想得到这种效果（或类似）

这是针对 iPhone/iOS 的，因此它可以是 Safari 使用的任何 webkit。

Answer 1

你好，

您也可以尝试向该对象添加“-webkit-text-stroke-color”属性，可能会增加 "font-weight"。您代码中的 "webkit-text-stroke-width" 属性可能还需要一个前导“-”才能工作。

Example in pure CSS / HTML

.element{
    color: #fff;
    font-weight: 700;
    font-size: 51px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: black;
}

另请参阅 MDN 上的 -webkit-text-stroke-width and -webkit-text-stroke。

真诚的，山姆。

Answer 2

也许您使用的是 IE 11，并且 -webkit-text-stroke 无法正常工作，因为它不受支持：see here

您可以尝试使用 text-shadow。 See supported browsers here

解释的真好here

如何在 javascript 中为 html 样式添加描边？

How to add stroke for html styling in javascript?

html

javascript

css

webkit

stroke