Question

随着所有新的CSS3边框内容（-webkit，...），现在是否可以为您的字体添加边框？（就像蓝色Twitter徽标周围的白色边框一样）。如果没有，是否有任何不太难看的黑客可以在CSS / XHTML中实现这一点，还是我还需要启动Photoshop？

Answer 1

正确的答案是：

h1 {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

<h1>Hello World</h1>

这将从四个边设置四个相同类型的阴影。

Answer 2

更新

这是用于生成笔划的SCSS mixin：http://codepen.io/pixelass/pen/gbGZYL

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
@function stroke($stroke, $color) {
  $shadow: ();
  $from: $stroke*-1;
  @for $i from $from through $stroke {
   @for $j from $from through $stroke {
      $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
    }
  }
  @return $shadow;
}
/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {Style}           - text-shadow
@mixin stroke($stroke, $color) {
  text-shadow: stroke($stroke, $color);
}

enter image description here

是老问题..接受（和好）答案..

但是......如果有人需要这个并且不喜欢打字代码......

这是一个2px黑色边框，支持CrossBrowser（不是IE）我需要这个@fontface字体，所以它需要比以前看到的答案更干净... 我逐个像素地取每一边以确保（几乎）没有“模糊”（手绘或类似）字体的间隙。可以添加子像素（0.5像素），但我不需要它。

只是边界的长代码??? -YES !!!

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;

Answer 3

您可以使用css text-shadow（或-webkit-text-shadow / -moz-text-shadow）和非常低的模糊模拟文字笔划：

#element
{
  text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0 0 2px #000;
  -webkit-text-shadow: 0 0 2px #000;
}

虽然这比-webkit-text-stroke属性更广泛可用，但我怀疑它可供大多数用户使用，但这可能不是问题（优雅降级，以及所有这些）。

Answer 4

要详细说明一些提到-webkit-text-stroke的答案，这里的代码是使它工作的代码：

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 2.00px; 
}

有关使用文字笔划的深入文章为here，支持文字笔划的浏览器列表为here。

Answer 5

似乎有一个'文字描边'属性，但（至少对我而言）它只适用于Safari。

http://webkit.org/blog/85/introducing-text-stroke/

Answer 6

以下是我正在使用的内容：

.text_with_1px_border
{
    text-shadow: 
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000;
}

.text_with_2px_border
{
    text-shadow: 
        /* first layer at 1px */
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000,
        /* second layer at 2px */
        -2px -2px 0px #000,
        -1px -2px 0px #000,
         0px -2px 0px #000,
         1px -2px 0px #000,
         2px -2px 0px #000,
         2px -1px 0px #000,
         2px  0px 0px #000,
         2px  1px 0px #000,
         2px  2px 0px #000,
         1px  2px 0px #000,
         0px  2px 0px #000,
        -1px  2px 0px #000,
        -2px  2px 0px #000,
        -2px  1px 0px #000,
        -2px  0px 0px #000,
        -2px -1px 0px #000;
}

Answer 7

具有Less mixin

的笔划字体字符

这是一个用于生成笔画的LESS mixin：http://codepen.io/anon/pen/BNYGBy?editors=110

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
.stroke(@stroke, @color) {
  @maxi: @stroke + 1;
  .i-loop (@i) when (@i > 0) {
    @maxj: @stroke + 1;
    .j-loop (@j) when (@j > 0) {
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(1px) 0 @color;
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(1px) 0 @color;
      .j-loop(@j - 1);
    }
    .j-loop (0) {}
    .j-loop(@maxj);
    .i-loop(@i - 1);
  }
  .i-loop (0) {}
  .i-loop(@maxi);
  text-shadow+: 0 0 0 @color;
}

（它基于pixelass答案，而不是使用SCSS）

Answer 8

text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;

Answer 9

我对这里提到的所有解决方案进行了比较，以进行快速概述：

s.reindex([lookup], method='ffill')

2019-09-20 00:40:00+00:00    4.63
Name: value, dtype: float64

https://codepen.io/Grienauer/pen/GRRdRJr

Answer 10

对不起，我来晚了，但是谈到文本阴影，我想你也会喜欢这个例子（当我需要在文本上有良好的阴影时，我经常使用它）：

                    text-shadow: -2px   -2px lightblue,
                                 -2px -1.5px lightblue,
                                 -2px   -1px lightblue,
                                 -2px -0.5px lightblue,
                                 -2px    0px lightblue,
                                 -2px  0.5px lightblue,
                                 -2px    1px lightblue,
                                 -2px  1.5px lightblue,
                                 -2px    2px lightblue,
                               -1.5px    2px lightblue,
                                 -1px    2px lightblue,
                               -0.5px    2px lightblue,
                                  0px    2px lightblue,
                                0.5px    2px lightblue,
                                  1px    2px lightblue,
                                1.5px    2px lightblue,
                                  2px    2px lightblue,
                                  2px  1.5px lightblue,
                                  2px    1px lightblue,
                                  2px  0.5px lightblue,
                                  2px    0px lightblue,
                                  2px -0.5px lightblue,
                                  2px   -1px lightblue,
                                  2px -1.5px lightblue,
                                  2px   -2px lightblue,
                                1.5px   -2px lightblue,
                                  1px   -2px lightblue,
                                0.5px   -2px lightblue,
                                  0px   -2px lightblue,
                               -0.5px   -2px lightblue,
                                 -1px   -2px lightblue,
                               -1.5px   -2px lightblue;
}

Answer 11

我曾尝试用css3做那些圆角和阴影。后来，我发现它仍然支持不足（当然是Internet Explorer！）

我最终尝试在JS（使用IE Canvas的HTML画布）中执行此操作，但它会对性能产生很大影响（甚至在我的C2D机器上）。简而言之，如果你真的需要这种效果，可以考虑使用JS库（大多数应该能够在IE6上运行），但是由于性能问题，不要过度使用它们。如果你仍然需要一个替代...你可以使用SFiR，然后PS它和SFiR它。 CSS3今天还没有准备好。

CSS字体边框？

11 个答案:

更新

具有Less mixin