Đường viền văn bản sử dụng css (đường viền xung quanh văn bản)

Có cách nào để tích hợp đường viền xung quanh văn bản như hình dưới đây không?

Sử dụng nhiều bóng văn bản:

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

<h1>test</h1>

Ngoài ra, bạn có thể sử dụng nét vẽ văn bản, chỉ hoạt động trong webkit:

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}

<h1>test</h1>

Cũng đọc thêm như CSS-Tricks.

Chắc chắn rồi. Bạn có thể sử dụng CSS3 text-shadow:

text-shadow: 0 0 2px #fff;

Tuy nhiên, nó sẽ không hiển thị ngay trong tất cả các trình duyệt. Tuy nhiên, sử dụng một thư viện script như Modernizr sẽ giúp bạn có được nó ngay trong hầu hết các trình duyệt.

Tôi không thích nhiều giải pháp dựa trên việc nhân các bóng chữ, nó không thực sự linh hoạt, nó có thể hoạt động với nét vẽ 2 pixel trong đó các hướng cần thêm là 8, nhưng với chỉ 3 pixel, hướng nét vẽ đã trở thành 16, v.v. . Không thực sự dễ quản lý.

Công cụ phù hợp tồn tại, đó là SVG <text> Vấn đề hỗ trợ của trình duyệt không có giá trị gì trong trường hợp này, vì việc sử dụng text-shadow cũng có vấn đề hỗ trợ riêng, filter: progid:DXImageTransformcó thể được sử dụng hoặc IE <10 nhưng thường không hoạt động như mong đợi.

Đối với tôi, giải pháp tốt nhất vẫn là SVG với dự phòng là văn bản không được vuốt cho trình duyệt cũ hơn:

Loại ứng dụng này hoạt động trên thực tế tất cả các phiên bản của Chrome và Firefox, Safari kể từ phiên bản 3.04, Opera 8, IE 9

So với text-shadowcác hỗ trợ của nó là: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9, nó thậm chí còn tương thích hơn.

.stroke {
  margin: 0;
  font-family: arial;
  font-size:70px;
  font-weight: bold;
  }
  
  svg {
    display: block;
  }
  
  text {
    fill: black;
    stroke: red;
    stroke-width: 3;
  }

<p class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
    <text x="0" y="70">Stroked text</text>
  </svg>
</p>

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

Phần sau sẽ bao gồm tất cả các trình duyệt đáng được sử dụng:

text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */