Thuộc tính Thuộc tính Box-Shadow Generator là một công cụ tương tác cho phép bạn tạo box-shadow
CSS thêm các hiệu ứng bóng xung quanh khung của một phần tử. Bạn có thể đặt nhiều hiệu ứng được phân tách bằng dấu phẩy. Một bóng hộp được mô tả bởi các độ lệch x và y so với phần tử, mờ và bán kính lan truyền và màu sắc.box-shadow
CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.Thử nó
box-shadow
cho phép bạn ném bóng thả từ khung của hầu hết mọi yếu tố. Nếu một border-radius
được chỉ định trên phần tử có bóng hộp, thì bóng hộp sẽ có cùng các góc tròn. Việc đặt hàng Z của nhiều bóng hộp giống như nhiều bóng văn bản [bóng được chỉ định đầu tiên nằm trên đầu].box-shadow
.Cú pháp
/* Keyword values */
box-shadow: none;
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba[0, 0, 0, 0.2];
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* Global values */
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: revert-layer;
box-shadow: unset;
Chỉ định một bóng hộp duy nhất bằng cách sử dụng:
- Hai, ba hoặc bốn giá trị
box-shadow =
0.
none |
#=
? &&
[ {2} ? ? ] &&
inset?- Nếu chỉ có hai giá trị được đưa ra, chúng được hiểu là các giá trị
box-shadow =
1 và
none |
#=
? &&
[ {2} ? ? ] &&
inset?box-shadow =
2.
none |
#=
? &&
[ {2} ? ? ] &&
inset? - Nếu một giá trị thứ ba được đưa ra, nó được hiểu là
box-shadow =
3.
none |
#=
? &&
[ {2} ? ? ] &&
inset? - Nếu giá trị thứ tư được đưa ra, nó được hiểu là
box-shadow =
4.
none |
#=
? &&
[ {2} ? ? ] &&
inset?
- Nếu chỉ có hai giá trị được đưa ra, chúng được hiểu là các giá trị
- Tùy chọn, từ khóa
box-shadow =
5.
none |
#=
? &&
[ {2} ? ? ] &&
inset? - Tùy chọn, giá trị
box-shadow =
6.
none |
#=
? &&
[ {2} ? ? ] &&
inset?
Để chỉ định nhiều bóng, cung cấp một danh sách bóng được phân tách bằng dấu phẩy.
Giá trị
box-shadow =5
none |
#=
? &&
[ {2} ? ? ] &&
inset?
Nếu không được chỉ định [mặc định], bóng được coi là bóng thả [như thể hộp được nâng lên trên nội dung]. Sự hiện diện của từ khóa
box-shadow =5 thay đổi bóng thành một bên trong khung [như thể nội dung bị gỡ bỏ bên trong hộp]. Bóng tối được vẽ bên trong đường viền [thậm chí là trong suốt], phía trên nền, nhưng bên dưới nội dung.
none |
#=
? &&
[ {2} ? ? ] &&
inset?
box-shadow =1
none |
#=
? &&
[ {2} ? ? ] &&
inset?
Giá trị
box-shadow =0 chỉ định khoảng cách ngang. Các giá trị âm đặt bóng ở bên trái của phần tử.
none |
#=
? &&
[ {2} ? ? ] &&
inset?
box-shadow =2
none |
#=
? &&
[ {2} ? ? ] &&
inset?
Các giá trị
box-shadow =0 chỉ định khoảng cách dọc. Các giá trị âm đặt bóng trên phần tử.
none |
#=
? &&
[ {2} ? ? ] &&
inset?
Nếu cả
box-shadow =1 và
none |
#=
? &&
[ {2} ? ? ] &&
inset?
box-shadow =2 được đặt thành
none |
#=
? &&
[ {2} ? ? ] &&
inset?
You may shoot me with your words,
You may cut me with your eyes,
You may kill me with your hatefulness,
But still, like air, I'll rise.
— Maya Angelou
5, thì bóng được đặt phía sau phần tử [và có thể tạo hiệu ứng mờ nếu box-shadow =3 và/hoặc
none |
#=
? &&
[ {2} ? ? ] &&
inset?
box-shadow =4 được đặt].
none |
#=
? &&
[ {2} ? ? ] &&
inset?
box-shadow =3
none |
#=
? &&
[ {2} ? ? ] &&
inset?
Đây là một giá trị ____10 thứ ba. Giá trị này càng lớn, độ mờ càng lớn, vì vậy bóng càng lớn và nhẹ hơn. Giá trị âm không được phép. Nếu không được chỉ định, nó sẽ là
You may shoot me with your words,
You may cut me with your eyes,
You may kill me with your hatefulness,
But still, like air, I'll rise.
— Maya Angelou
5 [cạnh của bóng rất sắc nét]. Thông số 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ó không được công phu như sau:Đối với một cạnh bóng dài, thẳng, điều này sẽ tạo ra một màu chuyển hướng chiều dài của khoảng cách mờ vuông góc và tập trung vào cạnh của bóng, và từ màu bóng đầy đủ ở điểm cuối bán kính bên trong bóng để trong suốt hoàn toàn Tại điểm cuối bên ngoài nó.
box-shadow =4
none |
#=
? &&
[ {2} ? ? ] &&
inset?
Đây là giá trị
box-shadow =0 thứ tư. Các giá trị tích cực sẽ khiến bóng tối mở rộng và phát triển lớn hơn, các giá trị âm sẽ khiến bóng bị thu hẹp. Nếu không được chỉ định, nó sẽ là
none |
#=
? &&
[ {2} ? ? ] &&
inset?
You may shoot me with your words,
You may cut me with your eyes,
You may kill me with your hatefulness,
But still, like air, I'll rise.
— Maya Angelou
5 [bóng sẽ có cùng kích thước với phần tử].box-shadow =6
none |
#=
? &&
[ {2} ? ? ] &&
inset?
Xem các giá trị
box-shadow =6 cho các từ khóa và ký hiệu có thể. Nếu không được chỉ định, nó mặc định là
none |
#=
? &&
[ {2} ? ? ] &&
inset?
blockquote {
padding: 20px;
box-shadow: inset 0 -3em 3em rgba[0, 0, 0, 0.1], 0 0 0 2px rgb[255, 255, 255],
0.3em 0.3em 1em rgba[0, 0, 0, 0.3];
}
6.Nội suy
Khi hoạt hình bóng, chẳng hạn như khi nhiều giá trị bóng trên hộp chuyển sang các giá trị mới trên di chuột, các giá trị được nội suy. Nội suy xác định các giá trị trung gian của các thuộc tính, chẳng hạn như bán kính mờ, bán kính lan truyền và màu sắc, khi chuyển bóng. Đối với mỗi cái bóng trong một danh sách các bóng, màu, x, y, mờ và sự chuyển tiếp lây lan; màu là
box-shadow =6 và các giá trị khác là
none |
#=
? &&
[ {2} ? ? ] &&
inset?
box-shadow =0s.
none |
#=
? &&
[ {2} ? ? ] &&
inset?
Trong việc nội suy nhiều bóng giữa hai danh sách được phân tách bằng dấu phẩy của nhiều bóng hộp, các bóng được ghép nối, theo thứ tự, với sự nội suy xảy ra giữa các bóng được ghép nối. Nếu danh sách các bóng có độ dài khác nhau, thì danh sách ngắn hơn được đệm ở cuối với bóng có màu là
blockquote {
padding: 20px;
box-shadow: inset 0 -3em 3em rgba[0, 0, 0, 0.1], 0 0 0 2px rgb[255, 255, 255],
0.3em 0.3em 1em rgba[0, 0, 0, 0.3];
}
9, và X, Y và mờ là
You may shoot me with your words,
You may cut me with your eyes,
You may kill me with your hatefulness,
But still, like air, I'll rise.
— Maya Angelou
5, với hình nhỏ hoặc thiếu, được đặt để khớp. Nếu, trong bất kỳ cặp bóng nào, người ta đã đặt box-shadow =5 và cái kia thì không, toàn bộ danh sách bóng không được giải thích; Các bóng sẽ thay đổi thành các giá trị mới mà không có hiệu ứng hoạt hình.
none |
#=
? &&
[ {2} ? ? ] &&
inset?
Định nghĩa chính thức
2 |
Tất cả các yếu tố. Nó cũng áp dụng cho 3. |
không |
Bất kỳ độ dài nào được thực hiện tuyệt đối; Bất kỳ màu được chỉ định được tính toán; nếu không theo quy định |
một danh sách bóng tối |
Cú pháp chính thức
box-shadow =
none |
#=
? &&
[ {2} ? ? ] &&
inset?
Ví dụ
Đặt ba bóng
Trong ví dụ này, chúng tôi bao gồm ba cái bóng: một cái bóng nhỏ, bóng thả thông thường và bóng 2px tạo hiệu ứng biên giới [chúng tôi có thể đã sử dụng
Hello World
4 thay vì cho cái bóng thứ ba đó].HTML
You may shoot me with your words,
You may cut me with your eyes,
You may kill me with your hatefulness,
But still, like air, I'll rise.
— Maya Angelou
CSS
blockquote {
padding: 20px;
box-shadow: inset 0 -3em 3em rgba[0, 0, 0, 0.1], 0 0 0 2px rgb[255, 255, 255],
0.3em 0.3em 1em rgba[0, 0, 0, 0.3];
}
Kết quả
Đặt 0 cho bù và mờ
Khi
Hello World
5, Hello World
6 và Hello World
7 đều bằng không, bóng hộp sẽ là một phác thảo màu rắn có kích thước bằng nhau ở tất cả các mặt. Các bóng được kéo trở lại phía trước, vì vậy bóng đầu tiên nằm trên đỉnh của các bóng tiếp theo. Khi border-radius
được đặt thành 0, như mặc định, các góc của bóng sẽ là, tốt, các góc. Nếu chúng tôi đặt border-radius
của bất kỳ giá trị nào khác, các góc sẽ được làm tròn.Chúng tôi đã thêm một biên độ kích thước của bóng hộp rộng nhất để đảm bảo bóng không chồng lên các phần tử liền kề hoặc vượt ra ngoài đường viền của hộp chứa.Một bóng hộp không ảnh hưởng đến kích thước mô hình hộp.
HTML
Hello World
CSS
p {
box-shadow: 0 0 0 2em #f4aab9, 0 0 0 4em #66ccff;
margin: 4em;
padding: 1em;
}
Kết quả
Thông số kỹ thuật
Nền CSS và Biên giới Mô-đun Cấp 3 # Box-Shadow # box-shadow |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt