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
bộ 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:
<p>
Text
</p>
body {
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:
<p>
Text
</p>
body {
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:
<p>
Text
</p>
body {
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:
<p>
Text
</p>
body {
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
-
thuộc tính
text-stroke,
thiết lập viền ngoài văn bản -
thuộc tính
text-stroke-color,
thiết lập màu sắc cho viền ngoài văn bản