文本的轮廓效果

在CSS中有什么方法可以给不同颜色的文本提供轮廓吗?我想突出我的文本的一些部分，使其更直观-如名称，链接等。改变链接的颜色等是常见的现在，所以我想要一些新的东西。

当前回答

我正在寻找一个跨浏览器的文本笔画解决方案，工作时叠加在背景图像。我想我有一个解决方案，不涉及额外的标记，js和工作在IE7-9(我还没有测试6)，也不会导致混淆问题。

这是一个使用CSS3文本阴影的组合，除了IE (http://caniuse.com/#search=text-shadow)，它有很好的支持，然后使用IE过滤器的组合。目前CSS3文本笔画支持很差。

即过滤器

辉光滤镜(http://www.impressivewebs.com/css3-text-shadow-ie/)看起来很糟糕，所以我没有使用它。

大卫·休伊特的答案是在不同方向的组合上添加阴影滤镜。ClearType随后不幸被删除，因此我们最终得到了严重的别名文本。

然后我将useragentman上建议的一些元素与dropshadow滤镜结合起来。

把它们放在一起

这个例子是带有白色描边的黑色文本。顺便说一下，我使用条件html类的目标IE (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/)。

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}

2012-07-18 09:36:22

其他回答

编辑:文本笔画现在相当成熟，并在大多数浏览器中实现。它更容易，更清晰，更精确。如果您的浏览器用户可以支持它，那么您现在应该首先使用文本描边，而不是文本阴影。

你可以也应该只使用文本阴影效果，不需要任何偏移量:

.outline {
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

为什么?当你偏移多个阴影效果时，你会开始注意到笨拙、锯齿状的角: 在一个位置上使用文本阴影效果可以消除偏移，这意味着如果你觉得太薄，想要一个深色的轮廓，没有问题-你可以重复同样的效果(保持相同的位置和模糊)，几次。像这样:

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

下面是一个例子(上图)，同样的效果重复了14次(下图):

还要注意:因为线条变得很细，所以使用-webkit-font-smoothing: antialiased关闭亚像素渲染是个好主意。

2014-06-01 16:27:33

试一试:

<!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 2px 2px; } h1.m1 { text-shadow: 2px 2px red; } h1.m2 { text-shadow: 2px 2px 5px red; } h1.m3 { color: white; text-shadow: 2px 2px 4px #000000; } h1.m4 { text-shadow: 0 0 3px #FF0000; } h1.m5{ color: #FFFFFF; background: #232323; text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18; } h1.m6{ color: #FFFFFF; background: #FFFFFF; text-shadow: 2px 2px 0 #4074b5, 2px -2px 0 #4074b5, -2px 2px 0 #4074b5, -2px -2px 0 #4074b5, 2px 0px 0 #4074b5, 0px 2px 0 #4074b5, -2px 0px 0 #4074b5, 0px -2px 0 #4074b5; } h1.m7 { color: #444444; background: #FFFFFF; text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC; } </style> </head> <body> <h1 class="m6">Text-shadow effect!</h1> <h1 class="m7">Text-shadow effect!</h1> <h1>Text-shadow effect!</h1> <h1 class="m1">Text-shadow effect!</h1> <h1 class="m2">Text-shadow effect!</h1> <h1 class="m3">Text-shadow effect!</h1> <h1 class="m4">Text-shadow effect!</h1> <h1 class="m5">Text-shadow effect!</h1> </body> </html>

2022-08-07 06:30:29

使用更粗的笔画会有点混乱，如果你有sass的乐趣尝试这个mixin，不完美，取决于笔画的重量，它会生成相当多的css。

 @mixin stroke($width, $colour: #000000) {
      $shadow: 0 0 0 $colour; // doesn't do anything but I couldn't work out how to create a blank string and maintain commas
      @for $i from 0 through $width {
          $shadow: $shadow,
          -$i + px -$width + px 0 $colour,
          $i + px -$width + px 0 $colour,
          -$i + px $width + px 0 $colour,
          $i + px $width + px 0 $colour,
          -$width + px -$i + px 0 $colour,
          $width + px -$i + px 0 $colour,
          -$width + px $i + px 0 $colour,
          $width + px $i + px 0 $colour,
      }
      text-shadow: $shadow;
}

2014-03-12 18:46:38

这个用于SASS的mixin将给出平滑的结果，使用8轴:

@mixin stroke($size: 1px, $color: #000) {
  text-shadow:
    -#{$size} -#{$size} 0 $color,
     0        -#{$size} 0 $color,
     #{$size} -#{$size} 0 $color,
     #{$size}  0        0 $color,
     #{$size}  #{$size} 0 $color,
     0         #{$size} 0 $color,
    -#{$size}  #{$size} 0 $color,
    -#{$size}  0        0 $color;
}

和普通CSS:

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

2017-11-27 12:43:52

h1 { 颜色:黑色; -webkit-text-fill-color:白色;/*将覆盖颜色(不管顺序)*/ -webkit-text-stroke-width: 1 px; -webkit-text-stroke-color:黑色; ｝ <标题>正确抚摸!< / h1 >

2017-09-02 19:11:08

文本的轮廓效果

推荐文章

最新文章

标签