Thuộc tính box-shadow

     

Thuộc tính CSS box-shadow thêm cảm giác đổ shadow bao quanh khung của phần tử. Chúng ta có thể đặt những hiệu ứng được phân tách bằng vết phẩy. Box shadow được tế bào tả bằng hiệu số X với Y đối với phần tử, độ mờ và nửa đường kính trải rộng với màu sắc.

Bạn đang xem: Thuộc tính box-shadow

Thuộc tính box-shadow cho phép bạn tạo box shadow từ size của hầu hết mọi phần tử. Trường hợp border-radius được hướng đẫn trên thành phần có box shadow, box shadow sẽ sở hữu cùng các góc tròn. Thiết bị tự z của nhiều box shadow cũng như nhiều shadow văn phiên bản (shadow được chỉ định đầu tiên nằm trên cùng).


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

Hai, cha hoặc tứ giá trị .Nếu chỉ có hai quý giá được đưa ra, bọn chúng được đọc là những giá trị và .Nếu giá trị thứ ba được gửi ra, nó được gọi là .Nếu giá trị thứ bốn được gửi ra, nó được đọc là .Tùy chọn, trường đoản cú khóa inset.Tùy chọn, một quý giá .

Để chỉ định nhiều shadow, hãy hỗ trợ danh sách các shadow được phân bóc bằng vết phẩy.

Value

inset

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

Đây là hai giá trị để tại vị độ lệch shadow. chỉ định khoảng cách ngang. Quý giá âm để shadow ở phía trái của phần tử. chỉ định khoảng cách dọc. Giá trị âm đặt shadow bên trên phần tử. Coi để biết những đơn vị khả thi. Trường hợp cả hai giá trị đa số là 0, thì shadow sẽ tiến hành đặt phía sau thành phần (và rất có thể tạo ra hiệu ứng mờ nếu đặt và / hoặc ).

Xem thêm: Đại Từ Chỉ Định Trong Tiếng Anh (Demonstrative Pronouns), Đại Từ Chỉ Định Tiếng Anh

Đây là quý hiếm trang bị ba. Giá trị này càng bự thì độ mờ càng lớn, cho nên vì thế shadow trở nên to hơn và vơi hơn. Cực hiếm âm không được phép. Nếu như không được chỉ định, nó đang là 0 (cạnh của shadow là nhan sắc nét). Đặc điểm nghệ thuật không bao gồm 1 thuật toán đúng chuẩn về cách tính nửa đường kính mờ, mặc dù nhiên, nó giải thích cụ thể như sau:

… Đối với cạnh shadow dài với thẳng, điều này sẽ tạo ra sự biến hóa màu bởi độ lâu năm 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ới phạm vi từ màu sắc shadow không thiếu thốn tại điểm cuối buôn bán kính bên phía trong shadow buổi tối sang hoàn toàn trong suốt ở điểm cuối bên phía ngoài nó.

Đây là cực hiếm vật dụng tư. Những giá trị dương sẽ tạo cho box shadow rộng lớn ra và bự hơn, những giá trị âm sẽ khiến cho box shadow nhỏ lại. Nếu không được chỉ định, nó sẽ là 0 (shadow sẽ sở hữu được cùng kích cỡ với phần tử).

Xem những giá trị nhằm biết những từ khóa và ký kết hiệu có thể có. Còn nếu không được chỉ định, nó đang mặc định là màu hiện tại tại.

Ví dụ:


element width: 300px;height: 100px;background-color: #FFFFFF;position: relative;box-shadow: 5px -5px 5px 0px #895A2C;

*

Kết luận

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

Đối với mỗi box shadow, nếu như cả nhị shadow đầu vào có hoặc không được chèn vào, thì shadow inset cần khớp với các shadow nguồn vào về vụ việc đó. Nếu ngẫu nhiên cặp shadow nguồn vào nào có một trong những phần chèn với phần còn lại không tồn tại phần chèn, toàn cục danh sách shadow sẽ không được inset.

Xem thêm: Cuộc Thi Viết Thư Upu Lần Thứ 50, Toàn Văn Bức Thư Đạt Giải Nhất

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 sống cuối bằng các shadow gồm màu vào suốt, toàn bộ độ lâu năm đều bằng 0 và bao gồm phần chèn (hoặc không) khớp với danh sách dài hơn.