Ví dụ về thuộc tính text-shadow

Thuộc tính text-shadow

Thuộc tính text-shadow: Xác định bóng đổ cho thành phần.

HTML viết:

<html>
<head></head>
<body>
<p>Text shadow</p>
</body>
</html>

CSS viết:

p {
    font-size: 20px;
    font-weight: bold;
}

Hiển thị trình duyệt khi chưa có text-shadow:

Text shadow

Thêm thuộc tính text-shadow, CSS viết:

p {
    font-size: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 2px #cc0000;
}

Hiển thị trình duyệt khi có text-shadow:

Text shadow

Thuộc tính text-shadow với giá trị chiều ngang

Thuộc tính text-shadow với giá trị chiều ngang: Xác định vị trí của bóng theo chiều ngang, có thể dùng giá trị âm.

Thêm thuộc tính text-shadow với giá trị chiều ngang, CSS viết:

p {
    font-size: 20px;
    font-weight: bold;
    text-shadow: 10px 2px 2px #cc0000;
}

Hiển thị trình duyệt khi có text-shadow:

Text shadow

Thuộc tính text-shadow với giá trị chiều dọc

Thuộc tính text-shadow với giá trị chiều dọc: Xác định vị trí của bóng theo chiều dọc, có thể dùng giá trị âm.

Thêm thuộc tính text-shadow với giá trị chiều dọc, CSS viết:

p {
    font-size: 20px;
    font-weight: bold;
    text-shadow: 2px 10px 2px #cc0000;
}

Hiển thị trình duyệt khi có text-shadow:

Text shadow

Thuộc tính text-shadow với giá trị độ nhòe của bóng

Thuộc tính text-shadow với giá trị độ nhòe của bóng: Xác định khoảng cách độ nhòe của bóng.

Thêm thuộc tính text-shadow với giá trị độ nhòe của bóng, CSS viết:

p {
    font-size: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 10px #cc0000;
}

Hiển thị trình duyệt khi có text-shadow:

Text shadow

Thuộc tính text-shadow với giá trị mã màu

Thuộc tính text-shadow với giá trị mã màu: Xác định màu sắc của bóng.

Thêm thuộc tính text-shadow với giá trị mã màu, CSS viết:

p {
    font-size: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 2px #00ff00;
}

Hiển thị trình duyệt khi có text-shadow:

Text shadow

text-overflow