Hướng dẫn how do i use drop shadow in css? - làm cách nào để sử dụng bóng đổ trong css?
|
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 Chỉ định một bóng hộp duy nhất bằng cách sử dụng:
Để 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 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. box-shadow =1 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ử. box-shadow =2 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ử. Nếu cả box-shadow =1 và box-shadow =2 được đặt thành box-shadow =3 và/hoặc box-shadow =4 được đặt). box-shadow =3 Đâ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à
box-shadow =4 Đâ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à box-shadow =6 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à Nội suyKhi 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à box-shadow =0s. 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à 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. Định nghĩa chính thức
Cú pháp chính thứcbox-shadow = Ví dụĐặt ba bóngTrong 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 HTMLCSSKết quảĐặt 0 cho bù và mờ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. HTMLCSSKết quảThông số kỹ thuật
Tính tương thích của trình duyệt webBảng BCD chỉ tải trong trình duyệt Xem thêmBạn có thể thêm bóng trong CSS không?Chúng ta có thể thêm một bóng thả vào bất kỳ phần tử HTML nào bằng cách sử dụng hộp số hộp CSS.using the CSS property box-shadow .
Drop Shadow là gì và ví dụ về?Một lớp phủ tối bao phủ một phần của văn bản hoặc một đồ họa làm cho đối tượng xuất hiện ba chiều.Trong các hệ điều hành và các chương trình phần mềm, Drop Shadows có thể làm cho các yếu tố giao diện dễ dàng hơn để xem.Ví dụ, một hộp thoại có thể xuất hiện ở phía trước các yếu tố khác trong cửa sổ.. In operating systems and software programs, drop shadows can make interface elements easier to see. For example, a dialog box may appear in front of the other elements in a window. |
