Thuộc tính Box shadow trong CSS

Thuộc tính Box shadow trong CSS

Rate this post

Thuộc tính CSS box-shadow thêm hiệu ứng đổ shadow xung quanh khung của phần tử. Bạn có thể đặt nhiều hiệu ứng được phân tách bằng dấu phẩy. box shadow được mô tả bằng hiệu số X và Y so với phần tử, độ mờ và bán kính trải rộng và màu sắc.

Thuộc tính box-shadow cho phép bạn tạo box shadow từ khung của hầu hết mọi phần tử. Nếu border-radius được chỉ định trên phần tử có box shadow, box shadow sẽ có cùng các góc tròn. Thứ tự z của nhiều box shadow cũng giống như nhiều shadow văn bản (shadow được chỉ định đầu tiên nằm trên cùng).

Các bài viết liên quan:

Chỉ định một box shadow duy nhất bằng cách sử dụng:

  • Hai, ba hoặc bốn giá trị <length>.
  • Nếu chỉ có hai giá trị được đưa ra, chúng được hiểu là các giá trị <offset-x> và <offset-y>.
  • Nếu giá trị thứ ba được đưa ra, nó được hiểu là <blur-radius>.
  • Nếu giá trị thứ tư được đưa ra, nó được hiểu là <spread-radius>.
  • Tùy chọn, từ khóa inset.
  • Tùy chọn, một giá trị <color>.

Để chỉ định nhiều shadow, hãy cung cấp danh sách các shadow được phân tách bằng dấu phẩy.

Value

  1. inset

Nếu không được chỉ định (mặc định), box shadow được giả định là box shadow (như thể hộp được nâng lên trên nội dung). Sự hiện diện của từ khóa inset sẽ thay đổi box shadow thành một shadow bên trong khung (như thể nội dung bị giảm xuống bên trong hộp). shadow chèn được vẽ bên trong đường viền (thậm chí cả những shadow trong suốt), phía trên nền, nhưng bên dưới nội dung.

  1. <offset-x> <offset-y>

Đây là hai giá trị <length> để đặt độ lệch shadow. <offset-x> chỉ định khoảng cách ngang. Giá trị âm đặt shadow ở bên trái của phần tử. <offset-y> chỉ định khoảng cách dọc. Giá trị âm đặt shadow bên trên phần tử. Xem <length> để biết các đơn vị khả thi. Nếu cả hai giá trị đều là 0, thì shadow sẽ được đặt phía sau phần tử (và có thể tạo ra hiệu ứng mờ nếu đặt <blur-radius> và / hoặc <spread-radius>).

  1. <blur-radius>

Đây là giá trị <length> thứ ba. Giá trị này càng lớn thì độ mờ càng lớn, do đó shadow trở nên lớn hơn và nhẹ hơn. Giá trị âm không được phép. Nếu không được chỉ định, nó sẽ là 0 (cạnh của shadow là sắc nét). Đặc điểm kỹ thuật không bao gồm một thuật toán chính xác về cách tính bán kính mờ, tuy nhiên, nó giải thích chi tiết như sau:

… Đối với cạnh shadow dài và thẳng, điều này sẽ tạo ra sự chuyển đổi màu bằng độ dài của khoảng cách làm mờ vuông góc với và tập trung vào cạnh của shadow và phạm vi từ màu shadow đầy đủ tại điểm cuối bán kính bên trong shadow tối sang hoàn toàn trong suốt ở điểm cuối bên ngoài nó.

  1. <spread-radius>

Đây là giá trị <length> thứ tư. Các giá trị dương sẽ làm cho box shadow rộng ra và lớn hơn, các giá trị âm sẽ làm cho box shadow nhỏ lại. Nếu không được chỉ định, nó sẽ là 0 (shadow sẽ có cùng kích thước với phần tử).

  1. <color>

Xem các giá trị <color> để biết các từ khóa và ký hiệu có thể có. Nếu không được chỉ định, nó sẽ mặc định là màu hiện tại.

Ví dụ:

element {
	width: 300px;	height: 100px;	background-color: #FFFFFF;	position: relative;	box-shadow: 5px -5px 5px 0px #895A2C;
}
Thuộc tính Box shadow trong CSS

Kết luận

Mỗi shadow trong danh sách (coi không có shadow nào là danh sách có độ dài 0) được inset thông qua thành phần màu (dưới dạng màu) và các thành phần x, y, mờ và (khi thích hợp) trải rộng (theo độ dài). 

Đối với mỗi box shadow, nếu cả hai shadow đầu vào có hoặc không được chèn vào, thì shadow inset phải khớp với các shadow đầu vào về vấn đề đó. Nếu bất kỳ cặp shadow đầu vào nào có một phần chèn và phần còn lại không có phần chèn, toàn bộ danh sách shadow sẽ không được inset.

Nếu danh sách các shadow có độ dài khác nhau, thì danh sách ngắn hơn sẽ được đệm ở cuối bằng các shadow có màu trong suốt, tất cả độ dài đều bằng 0 và có phần chèn (hoặc không) khớp với danh sách dài hơn.

Leave a Reply