Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Thêm hiệu ứng bóng cho văn bản (text-shadow) với CSS

Giới thiệu

Sử dụng thuộc tính text-shadow để thêm hiệu ứng bóng cho văn bản.

Ví dụ

<html>
<head>
    <style>
        h1 { text-shadow: 2px 2px; }
        h2 { text-shadow: 2px 2px red; }
        h3 { text-shadow: 2px 2px 5px red; }
        h4 { color: white; text-shadow: 2px 2px 4px #000000; }
        h5 { text-shadow: 0 0 3px #FF0000; }
        h6 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; }
        p { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; }
    </style>
</head>
<body>
    <h1>Tutorialspoint.com</h1>
    <h2>Tutorialspoint.com</h2>
    <h3>Tutorialspoint.com</h3>
    <h4>Tutorialspoint.com</h4>
    <h5>Tutorialspoint.com</h5>
    <h6>Tutorialspoint.com</h6>
    <p>Tutorialspoint.com</p>
</body>
</html>

Kết quả

Thêm hiệu ứng bóng cho văn bản (text-shadow) với CSS