Thuộc tính text-stroke

Thuộc tính text-stroke thiết lập màu sắc và độ dày của đường viền (contour) bao quanh các ký tự văn bản, hay còn gọi là viền ngoài (stroke). Giá trị của thuộc tính cần được xác định bằng độ dày viền và màu sắc của viền, cách nhau bởi dấu cách.

Cú pháp

cssbộ_chọn {
  text-stroke: độ_dày_viền và màu_của_nó;
}

Ví dụ cơ bản

Viền văn bản đơn giản:

html<div class="stroked-text">
  Lorem ipsum dolor sit amet
</div>

css.stroked-text {
  font-size: 48px;
  font-weight: bold;
  -webkit-text-stroke: 2px red;
  text-stroke: 2px red;
}

Результат:

Chỉ viền

Bây giờ, hãy làm cho màu văn bản trùng với màu nền (trong trường hợp của chúng ta là màu trắng). Kết quả là chỉ còn lại phần viền:

html<div class="stroked-text">
  Lorem ipsum dolor sit amet
</div>

css.stroked-text {
  font-size: 48px;
  font-weight: bold;
  color: white;
  -webkit-text-stroke: 2px black;
  text-stroke: 2px black;
}

Результат:

Viền có gradient

Tạo viền gradient bằng cách sử dụng thuộc tính background-clip:

html<div class="gradient-stroke">
  Lorem ipsum dolor sit amet
</div>

css.gradient-stroke {
  font-size: 42px;
  font-weight: bold;
  background: linear-gradient(to right, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px #333;
  text-stroke: 1px #333;
}

Результат:

Viền nhiều lớp

Hiệu ứng viền kép bằng cách sử dụng text-shadow:

html<div class="double-stroke">
  Lorem ipsum dolor sit amet
</div>

css.double-stroke {
  font-size: 40px;
  color: white;
  -webkit-text-stroke: 3px #000;
  text-stroke: 3px #000;
  text-shadow: 
    0 0 5px #000,
    0 0 10px #000;
}

Результат:

Viền có hiệu ứng động

Thêm hiệu ứng động thay đổi viền:

html<div class="animated-stroke">
  Lorem ipsum dolor sit amet
</div>

css.animated-stroke {
  font-size: 38px;
  color: white;
  -webkit-text-stroke: 1px #ff0000;
  text-stroke: 1px #ff0000;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { -webkit-text-stroke: 1px #ff0000; text-stroke: 1px #ff0000; }
  50% { -webkit-text-stroke: 3px #ff0000; text-stroke: 3px #ff0000; }
  100% { -webkit-text-stroke: 1px #ff0000; text-stroke: 1px #ff0000; }
}

Результат:

Xem thêm