文字轮廓效果

Question

CSS中有什么方法可以为不同颜色的文本提供轮廓？我想突出显示文本的某些部分以使其更直观-例如名称，链接等。更改链接颜色等现在很常见，因此我需要一些新的东西。

Answer 1

text-stroke在CSS3中有一个名为webkit的实验性属性，我一直在尝试使其工作一段时间，但到目前为止仍未成功。相反，我使用的是已经受支持的text-shadow属性（我相信Chrome，Firefox，Opera和IE 9 支持该属性）。使用四个阴影来模拟描边文本：.strokeme {&nbsp; color: white;&nbsp; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}<div class="strokeme">&nbsp; This text should have a stroke in some browsers</div>我在这里为你做了一个演示和悬停的例子可以在这里找到正如Jason C在评论中提到的那样text-shadow，除Opera Mini外，所有主流浏览器都支持CSS属性。我认为text-stroke应该使用CSS来解决此问题，以实现向后兼容（实际上并不是与自动更新的浏览器有关的问题）。

Answer 2

&nbsp;text-stroke 现在已经相当成熟，并且已在大多数浏览器中实现。它更容易，更清晰，更精确。如果您的浏览器受众可以支持它，则现在应该text-stroke先使用而不是text-shadow。您可以并且应该仅使用text-shadow没有任何偏移量的效果来执行此操作：.outline {&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; text-shadow: #000 0px 0px 1px;&nbsp; &nbsp; -webkit-font-smoothing: antialiased;}为什么？当您偏移多个阴影效果时，您会开始不舒服地注意到锯齿状的拐角：仅将文本阴影效果放在一个位置就可以消除偏移，这意味着如果您觉得它太薄并且希望使用较暗的轮廓，那么没问题-您可以重复多次相同的效果（保持相同的位置和模糊）。像这样：text-shadow: #000 0px 0px 1px,&nbsp; &nbsp;#000 0px 0px 1px,&nbsp; &nbsp;#000 0px 0px 1px,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#000 0px 0px 1px,&nbsp; &nbsp;#000 0px 0px 1px,&nbsp; &nbsp;#000 0px 0px 1px;这是一个效果的样本（顶部），相同的效果重复了14次（底部）：另请注意：由于线条太细，因此最好使用关闭子像素渲染-webkit-font-smoothing: antialiased。

Answer 3

简单！SVG来了。这是一种简化的方法：svg{&nbsp; font: bold 70px Century Gothic, Arial;&nbsp; width: 100%;&nbsp; height: 120px;}text{&nbsp; fill: none;&nbsp; stroke: black;&nbsp; stroke-width:0.5px;&nbsp; // stroke-dasharray: 2,2;&nbsp; stroke-linejoin: round;&nbsp; animation: 2s pulsate infinite;}@keyframes pulsate {&nbsp; 50%{ stroke-width:4px; }}<svg viewBox="0 0 450 50">&nbsp; <text y="40">Scalable Title</text></svg>