Trang chủ » HTML và CSS » CSS » Box shadow trong CSS

Box shadow trong CSS

Ví dụ sử dụng Box shadow trong CSS thêm bóng vào các phần tử <div>

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px;
}

#example2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px #888888;
}

#example3 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px red;
}
</style>
</head>
<body>

<p>Thuộc tính box-shadow xác định bóng của một phần tử</p>

<p>box-shadow: 5px 10px:</p>
<div id="example1">
  <p>Một phần tử div có bóng. Giá trị đầu tiên là độ lệch ngang và giá trị thứ hai là độ lệch dọc. Màu bóng sẽ được kế thừa từ màu văn bản.</p>
</div>

<p>box-shadow: 5px 10px #888888:</p>
<div id="example2">
  <p>Bạn cũng có thể xác định màu của bóng đổ. Ở đây màu bóng là màu xám.</p>
</div>

<p>box-shadow: 5px 10px red:</p>
<div id="example3">
  <p>Bóng đổ màu đỏ.</p>
</div>

</body>
</html>

Kết quả hiện thị cho ví dụ trên:

Thuộc tính box-shadow xác định bóng của một phần tử

box-shadow: 5px 10px:

Một phần tử div có bóng. Giá trị đầu tiên là độ lệch ngang và giá trị thứ hai là độ lệch dọc. Màu bóng sẽ được kế thừa từ màu văn bản.

box-shadow: 5px 10px #888888:

Bạn cũng có thể xác định màu của bóng đổ. Ở đây màu bóng là màu xám.

box-shadow: 5px 10px red:

Bóng đổ màu đỏ.

Định nghĩa và cách sử dụng

Thuộc tính box-shadow trong css gắn một hoặc nhiều bóng vào một phần tử.

Thông số kỹ thuật:

  • Giá trị mặc định: không có
  • Kế thừa: không
  • Animatable: Có
  • Phiên bản: CSS3
  • Cú pháp JavaScript: object.style.boxShadow = “10px 20px 30px blue”

Các trình duyệt hỗ trợ

Các phiên bản trình duyệt hỗ trợ Box shadow trong CSS
Các phiên bản trình duyệt hỗ trợ Box shadow trong CSS

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính. Các số theo sau -webkit- hoặc -moz- chỉ định phiên bản đầu tiên hoạt động với tiền tố.

Cú pháp

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Lưu ý: Để đính kèm nhiều bóng đổ vào một phần tử, hãy thêm danh sách các bóng đổ được phân tách bằng dấu phẩy (xem ví dụ và “Hãy tự mình thử” bên dưới).

Các giá trị của thuộc tính Box shadow trong CSS

  • None: Giá trị mặc định. Không có bóng nào được hiển thị
  • h-offset: Yêu cầu. Độ lệch ngang của bóng đổ. Giá trị dương đặt bóng ở bên phải hộp, giá trị âm đặt bóng ở bên trái hộp
  • v-offset: Độ lệch dọc của bóng đổ. Giá trị dương đặt bóng bên dưới hộp, giá trị âm đặt bóng bên trên hộp
  • blur: Tùy chọn. Bán kính mờ. Con số này càng cao thì bóng càng mờ
  • spread: Tùy chọn. Bán kính lan truyền. Giá trị dương làm tăng kích thước của bóng, giá trị âm làm giảm kích thước của bóng.
  • color: Tùy chọn. Màu sắc của bóng. Giá trị mặc định là màu văn bản. Xem Giá trị màu CSS để có danh sách đầy đủ các giá trị màu có thể có.
     – Lưu ý: Trong Safari (trên PC), tham số màu là bắt buộc. Nếu bạn không chỉ định màu sắc, bóng tối sẽ không được hiển thị.
  • inset: Tùy chọn. Thay đổi bóng từ bóng bên ngoài (đầu tiên) thành bóng bên trong
  • initial: Đặt thuộc tính này thành giá trị mặc định của nó.
  • inherit: Kế thừa thuộc tính này từ phần tử cha của nó. 

Ví dụ sử dụng Box shadow trong CSS thêm hiệu ứng mờ vào bóng

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 8px #888888;
}

#example2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 18px #888888;
}

#example3 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 18px red;
}
</style>
</head>
<body>

<p>box-shadow: 5px 10px 8px #888888:</p>
<div id="example1">
  <p>Giá trị thứ ba tùy chọn thêm hiệu ứng mờ cho bóng.</p>
</div>

<p>box-shadow: 5px 10px 18px #888888:</p>
<div id="example2">
  <p>Mờ hơn<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 8px #888888;
}

#example2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 18px #888888;
}

#example3 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 18px red;
}
</style>
</head>
<body>

<p>box-shadow: 5px 10px 8px #888888:</p>
<div id="example1">
  <p>Giá trị thứ ba tùy chọn thêm hiệu ứng mờ cho bóng.</p>
</div>

<p>box-shadow: 5px 10px 18px #888888:</p>
<div id="example2">
  <p>Mờ hơn.</p>
</div>

<p>box-shadow: 5px 10px 18px red:</p>
<div id="example3">
  <p>Mờ hơn và đỏ hơn.</p>
</div>

</body>
</html>

Kết quả hiện thị ví dụ trên:

box-shadow: 5px 10px 8px #888888:

Giá trị thứ ba tùy chọn thêm hiệu ứng mờ cho bóng.

box-shadow: 5px 10px 18px #888888:

Mờ hơn.

box-shadow: 5px 10px 18px red:

Mờ hơn và đỏ hơn.

 

Ví dụ sử dụng Box shadow trong CSS xác định bán kính lan của bóng đổ

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 8px 10px #888888;
}
</style>
</head>
<body>

<p>box-shadow: 5px 10px 8px 10px #888888:</p>
<div id="example1">
  <p>Giá trị thứ tư tùy chọn xác định độ lan tỏa của bóng đổ.</p>
</div>

</body>
</html>

Kết quả hiện thị cho ví dụ trên:

box-shadow: 5px 10px 8px 10px #888888:

Giá trị thứ tư tùy chọn xác định độ lan tỏa của bóng đổ.

 

Sử dụng Box shadow trong CSS xác định nhiều bóng đổ

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

#example2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
}
</style>
</head>
<body>

<p>box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green:</p>
<div id="example1">
  <p>Xác định với nhiều bóng đổ.</p>
</div>

<p>box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green:</p>
<div id="example2">
  <p>Xác định nhiều bóng đổ với hiệu ứng làm mờ.</p>
</div>

</body>
</html>

Kết quả hiện thị cho ví dụ trên:

box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green:

Xác định với nhiều bóng đổ.

box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green:

Xác định nhiều bóng đổ với hiệu ứng làm mờ.

 

Ví dụ Thêm từ khóa inset với Box shadow trong CSS

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px inset;
}

#example2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 20px red inset;
}
</style>
</head>
<body>

<p>box-shadow: 5px 10px inset:</p>
<div id="example1">
  <p>Từ khóa inset thay đổi bóng đổ thành bóng bên trong khung.</p>
</div>

<p>box-shadow: 5px 10px 20px red inset:</p>
<div id="example2">
  <p>Sử dụng Inset màu đỏ và làm mờ.</p>
</div>

</body>
</html>

Kết quả hiện thị cho ví dụ trên:

box-shadow: 5px 10px inset:

Từ khóa inset thay đổi bóng đổ thành bóng bên trong khung.

box-shadow: 5px 10px 20px red inset:

Sử dụng Inset màu đỏ và làm mờ.

 

Trên đây là bài viết của mình về cách sử dụng thuộc tính Box shadow trong CSS. Mong rằng nó sẽ hữu ích cho các bạn. 

Ngoài ra, bạn có thể tìm hiểu thêm về thuộc tính Tex shadow trong CSS nhé! Chúc các bạn 1 ngày vui vẻ <3

 

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *