Thuộc tính text-stroke-width

Thuộc tính text-stroke-width thiết lập độ dày của đường viền ngoài ký tự văn bản hoặc viền ngoài của nó. Thuộc tính nhận các giá trị được chỉ định bằng đơn vị kích thước như px, em, rem, v.v. Cũng có thể thiết lập các giá trị sau: thin (đường mảnh), medium (đường trung bình) và thick (đường dày).

Cú pháp

cssbộ chọn {
  text-stroke-width: số hoặc thin hoặc medium hoặc thick;
}

Ví dụ

Hãy thiết lập viền ngoài mảnh cho ký tự văn bản của chúng ta:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  -webkit-text-stroke-color: orange;
  -webkit-text-stroke-width: thin;
  text-stroke-width: thin;
  color: white;
  font-size: 10em;
  margin-top: 0;
  font-weight: bold;
  font-family: Arial;
}

Результат:

Ví dụ

Và bây giờ hãy thay đổi viền ngoài mảnh thành viền ngoài trung bình:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  -webkit-text-stroke-color: orange;
  -webkit-text-stroke-width: medium;
  text-stroke-width: medium;
  color: white;
  font-size: 10em;
  margin-top: 0;
  font-weight: bold;
  font-family: Arial;
}

Результат:

Ví dụ

Hãy thiết lập viền ngoài dày cho ký tự văn bản của chúng ta:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  -webkit-text-stroke-color: orange;
  -webkit-text-stroke-width: thick;
  text-stroke-width: thick;
  color: white;
  font-size: 10em;
  margin-top: 0;
  font-weight: bold;
  font-family: Arial;
}

Результат:

Ví dụ

Ngoài ra, hãy thiết lập viền ngoài 2px cho ký tự văn bản của chúng ta:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  -webkit-text-stroke-color: orange;
  -webkit-text-stroke-width: 2px;
  color: white;
  font-size: 10em;
  margin-top: 0;
  font-weight: bold;
  font-family: Arial;
}

Результат:

Xem thêm