如何使用 css 在我的文本周围创建边框 [重复]

Posted 2023-03-15

【中文标题】如何使用 css 在我的文本周围创建边框 [重复]

【英文标题】：How do I create a border around my text with css [duplicate]

【发布时间】：2014-03-10 00:48:24

【问题描述】：

我正在尝试在我的页脚小部件标题中重新创建我在网站中间部分使用的字体边框（“立​​即致电免费估价”）。我使用了文本阴影，但现在它看起来很有趣。有什么办法可以让它看起来像我在 Photoshop 中创建的文本？

http://www.mrsteamers.com/

【参考方案1】：

试试这个：CSS Font Border?

它使用多个阴影使阴影更厚。

这里又是代码

text-shadow: 1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0px 1px 0 #000,
    0px -1px 0 #000,
    -1px 0px 0 #000,
    1px 0px 0 #000,
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0px 2px 0 #000,
    0px -2px 0 #000,
    -2px 0px 0 #000,
    2px 0px 0 #000,
    1px 2px 0 #000,
    -1px 2px 0 #000,
    1px -2px 0 #000,
    -1px -2px 0 #000,
    2px 1px 0 #000,
    -2px 1px 0 #000,
    2px -1px 0 #000,
    -2px -1px 0 #000;

【讨论】：

当我使用这段代码时，它在我的笔记本电脑上看起来很完美！但是在我的桌面上看时，边框看起来并不平滑。也许它只是我的电脑？

您使用的是哪种操作系统和浏览器？也许字体没有针对网络进行优化（可能会导致粗边）。你也可以玩字体渲染-webkit-font-smoothing: antialiased;和-moz-osx-font-smoothing: grayscale;

我实际上在两台计算机上都使用 Chrome。但是，我的桌面（看起来不对的那个）是 PC，我的笔记本电脑是 Mac。

那是字体渲染的原因。阅读这篇文章：blog.webink.com/why-fonts-suck-windows-hinting。这也可能是由于像素密度。更高的密度 = 更平滑的字体。在我的 MBP-Retina 上，一切看起来都很完美，但对于客户或同事来说，它通常并不完美。所以我总是在其他设备上仔细检查。