How to add a shadow to an element

Thêm box shadow

Bóng đổ là một tính năng thiết kế phổ biến có thể giúp các phần tử nổi bật trên trang của bạn. Trong CSS, bóng đổ trên các box của phần tử được tạo bằng thuộc tính box-shadow (nếu bạn muốn thêm bóng vào chính văn bản, bạn cần dùng text-shadow).

Thuộc tính box-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)
• Bán kính lan rộng (spread radius)
• Màu sắc
• Từ khóa inset

Trong ví dụ dưới đây, chúng ta đã đặt trục X và Y là 5px, blur là 10px và spread là 2px. Tôi đang sử dụng màu đen bán trong suốt làm màu sắc. Hãy thử thay đổi các giá trị khác nhau để xem chúng ảnh hưởng đến bóng như thế nào.

<div class="wrapper">
  <button class="shadow">box-shadow</button>
</div>

.wrapper {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  padding: 5px 10px;
  border: 0;
  border-radius: 5px;
  font-weight: bold;
  font-size: 140%;
  background-color: #db1f48;
  color: white;
}

.shadow {
  box-shadow: 5px 5px 10px 2px rgb(0 0 0 / 0.8);
}

Xem thêm

• Box shadow generator
• Learn CSS: Advanced styling effects