时间戳

首页 > 解决方案 > How to border white and box-shadow this text

html - How to border white and box-shadow this text

问题描述

I want to edit text like this image and how to write it ?

enter image description here

标签： htmlcss

解决方案

有几种方法可以实现这一点。最常用的是使用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>

推荐阅读