How to add a shadow to text

Thêm bóng vào văn bản

Hướng dẫn thêm bóng vào box của chúng ta giải thích cách thêm bóng vào bất kỳ phần tử nào trên trang của bạn. Tuy nhiên, kỹ thuật đó chỉ thêm bóng vào box bao quanh phần tử. Để thêm bóng đổ vào chính văn bản, bạn cần một thuộc tính CSS khác: text-shadow.

Thuộc tính text-shadow nhận một số giá trị:

• Độ lệch theo trục x
• Độ lệch theo trục y
• Bán kính làm mờ (blur radius)
• Màu sắc

Trong ví dụ dưới đây, chúng ta đã đặt độ lệch trục x là 2px, độ lệch trục y là 4px, bán kính làm mờ là 4px, và màu sắc là màu xanh bán trong suốt. Hãy thử thay đổi các giá trị khác nhau để xem chúng ảnh hưởng đến hiệu ứng bóng như thế nào.

<div class="wrapper">
  <h1>Adding a shadow to text</h1>
</div>

h1 {
  color: royalblue;
  text-shadow: 2px 4px 4px rgb(46 91 173 / 0.6);
}