对文本的大纲效果 [英] Outline effect to text

问题描述

CSS中有什么方法给不同颜色的文本给出轮廓？我想强调我的文本的一些部分，使它更直观 - 像名称，链接等。改变链接颜色等是常见的，所以我想要一些新的。

Are there any ways in CSS to give outlines to text with different colors ? I want to highlight some parts of my text to make it more intuitive - like the names, links, etc. Changing the link colors etc. are common nowadays, so I want something new.

推荐答案

在CSS3中有一个实验性的webkit属性 text-stroke ，我一直试图让这个工作一段时间，但迄今为止失败。

There is an experimental webkit property called text-stroke in CSS3, I've been trying to get this to work for some time but have been unsuccessful so far.

我所做的是使用已经支持的 text-shadow 属性（支持Chrome，Firefox，Opera ，和IE 9我相信）。

What I have done instead is used the already supported text-shadow property (supported in Chrome, Firefox, Opera, and IE 9 I believe).

使用四个阴影来模拟描边文本：

Use four shadows to simulate a stroked text:

HTML： / p>

HTML:

<div class="strokeme">
    This text should have a stroke in some browsers
</div>

CSS：

.strokeme
{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}

我已经做了一个演示

一个悬浮的例子是可在这里

正如Jason C在评论中提到的，所有主要浏览器现在都支持 text-shadow CSS属性，Opera Mini除外。这个解决方案将工作向后兼容性（不是真的有关浏览器的自动更新的问题）我相信应该使用 text-stroke CSS。

As Jason C has mentioned in the comments, the text-shadow CSS property is now supported by all major browsers, with the exception of Opera Mini. Where this solution will work for backwards compatibility (not really an issue regarding browsers that auto-update) I believe the text-stroke CSS should be used.

这篇关于对文本的大纲效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！