Question

我想编辑像这样的图片以及如何写文字？

Answer 1

有几种方法可以实现此目的。最常见的是使用text-shadow，它可以用来设置多个文本阴影。但这看起来不太好（请参见下面的小提琴）。

其他选项包括使用-webkit-text-stroke-width属性，尽管 这是一个前缀属性，将来可能会删除 ，因此请当心（再次，请参见小提琴下面）;但是，从美学角度来看（特别是在较大尺寸的情况下），该方法比box-shadow方法更简单，匹配更紧密。

最后的选择（可能与期望的外观最一致，同时仍然保持良好的跨浏览器兼容性）是使用SVG（如上，请参见下面的小提琴）。

在SVG示例中，我还在初始文本上方添加了文本，以覆盖笔触侵犯文本的事实（即，向文本添加4px的笔触将在文本外部添加2px，在文本内部添加2px，从而导致文字变得不太“粗体”）。您可以通过使用（例如）伪元素（即<h1 data-stroke="PIN">PIN</h1>）对第二个示例（也使用笔触）进行保存效果。

这里的缺点显然是嵌套HTML更大。

您选择哪种方法将完全取决于您为此使用的上下文。而且如上所述，没有任何代码可以看到，如果您不做更多详细说明并提供到目前为止所做的示例，则无法给出更好的答案。

body {
  background: #eee
}

h1 {
  font-family: Impact, sans-serif;
  font-size: 4em;
  color: red;
}

/* Well-supported, but looks a bit naff */
.shadow {
  text-shadow:
      -2px 0 0 #fff,
      0 -2px 0 #fff,
      2px 0 0 #fff,
      0 2px 0 #fff,
      2px -2px 0 #fff,
      -2px 2px 0 #fff,
      -2px -2px 0 #fff,
      2px 2px 0 #fff,
      3px 3px 4px rgba(0,0,0,0.5)
}

/* Uses prefixes, which might be dropped in the future */
.stroke {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
  text-shadow: 3px 3px 4px rgba(0,0,0,0.5)
}

<body>
  <!-- Using text shadow -->
  <h1 class="shadow">PIN</h1>
  
  <!-- Using webkit stroke -->
  <h1 class="stroke">PIN</h1>
  
  <!-- Using svgs -->
  <svg width="100px" height="60px" viewBox="0 0 100 60">
    <defs>
      <style>
        text {
          font-family: Impact, sans-serif;
          font-size: 50px;
          fill: red;
          alignment-baseline: middle;
        }
        .outline {
          fill: white;
          stroke: white;
          stroke-width: 4;
         }
      </style>
      
      <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
        <feGaussianBlur stdDeviation="2 2" result="shadow"/>
        <feOffset dx="3" dy="3"/>
      </filter>
    </defs>
    <text x="10" y="30" style="filter: url(#shadow); fill: rgba(0,0,0,0.7)">PIN</text>
    <text x="10" y="30" class="outline">PIN</text>
    <text x="10" y="30">PIN</text>
  </svg>
</body>

如何在白色边框上加上阴影

1 个答案: