在Firefox中的文本描边和阴影CSS3 [英] Text Stroke and Shadow CSS3 in Firefox

问题描述

嘿，我想知道是否有一种方法添加一个笔画和阴影文本，我可以得到它的工作在Chrome和Safari作为webkit支持文本笔画和文本阴影。我可以得到在Firefox中显示的笔触，但是使用文本阴影和使用偏移量。

Hey guys I was wondering if there was a way of adding a stroke and shadow to text, I can get it working in Chrome and Safari as webkit supports text-stroke and text-shadow. I can get the stroke to display in Firefox but that is using text-shadow and playing with the offset. So does anyone know a way around this issue.

推荐答案

文本笔画属性不是标准CSS规范的一部分，因此最好避免使用 - Chrome会在其权限范围内随时提取。

The text-stroke property isn't part of the standard CSS spec, so it's best to avoid it - Chrome would be well within their rights to pull out it at any time.

你是对的，你可以使用多个逗号分隔的 text-shadow 创建 text-stroke 事实上你可以使用相同的技术来添加一个实际阴影：

You're right that you can create text-stroke-like effects using multiple comma-separated text-shadows - in fact you can use the same technique to add an 'actual' shadow as well:

h1 {
    font-size: 100px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #F00, -1px -1px 0 #F00, 1px -1px 0 #F00,
            -1px 1px 0 #F00, 3px 3px 5px #333;
}​

请小心，因为 text-shadow 不支持在IE9及以下。我建议只使用它的非基本造型：确保文本仍然只是当阴影/虚线轮廓不存在时，可读性。

Be careful though, because text-shadow isn't supported in IE9 and below either. I'd recommend only using it for non-essential styling: make sure the text is still just as readable when the shadow / faux outline isn't there.

这篇关于在Firefox中的文本描边和阴影CSS3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！