Trình tạo bộ lọc CSS

Cách sử dụng

1. Điều chỉnh các thanh trượt bộ lọc: sử dụng các thanh trượt để kiểm soát làm mờ, độ sáng, độ tương phản, độ bão hòa, xoay sắc thái, độ trong suốt, mức xám, sepia và đảo ngược.
2. Xem trước theo thời gian thực: hình ảnh hoặc phần tử mẫu được cập nhật ngay lập tức khi bạn di chuyển một thanh trượt.
3. Sao chép CSS: giá trị đầy đủ của thuộc tính filter (vd: filter: brightness(1.2) contrast(1.5) saturate(0.8)) sẵn sàng để dán vào stylesheet của bạn.

Tại sao sử dụng trình tạo CSS bộ lọc?

Các bộ lọc CSS cho phép áp dụng các hiệu ứng xử lý hình ảnh, làm mờ, độ tương phản, độ sáng, dịch chuyển màu, trực tiếp trong trình duyệt mà không cần Photoshop hoặc phần mềm chỉnh sửa hình ảnh. Chúng hoạt động trên hình ảnh, video và bất kỳ phần tử HTML nào. Xây dựng chuỗi thuộc tính filter bằng tay đòi hỏi phải biết tên hàm chính xác và phạm vi giá trị hợp lệ. Trình tạo này cung cấp các thanh trượt trực quan với phản hồi trực quan để có được kết xuất chính xác mong muốn.

Tính năng

• Tất cả các hàm CSS filter: blur, brightness, contrast, saturate, hue-rotate, opacity, grayscale, sepia, invert và drop-shadow.
• Xem trước trực tiếp: xem các thay đổi trên hình ảnh mẫu hoặc của bạn theo thời gian thực.
• Xác thực giá trị: các thanh trượt áp đặt phạm vi hợp lệ cho mỗi hàm filter.
• Đặt lại riêng lẻ: đặt một bộ lọc đơn về giá trị mặc định của nó mà không chạm vào những bộ lọc khác.
• Đầu ra kết hợp: tất cả các bộ lọc đã chọn được kết hợp thành một chuỗi filter duy nhất.

Câu hỏi thường gặp

Các bộ lọc CSS có thể áp dụng cho video không?

Có. Thuộc tính filter CSS hoạt động trên bất kỳ phần tử nào, bao gồm <video>, <img>, <div> và <canvas>. Khi áp dụng cho một video, bộ lọc được render theo thời gian thực trong khi phát.

Sự khác biệt giữa filter và backdrop-filter là gì?

filter áp dụng hiệu ứng cho phần tử và tất cả các con của nó. backdrop-filter áp dụng hiệu ứng cho nội dung phía sau (dưới) phần tử, thường được sử dụng cho các hiệu ứng kính mờ.

Các bộ lọc CSS có ảnh hưởng đến hiệu suất không?

Các bộ lọc với làm mờ hoặc compositing phức tạp có thể tốn nhiều cho GPU. Đối với các bộ lọc được animate, hãy đảm bảo phần tử ở trên lớp compositing riêng (thêm transform: translateZ(0) làm gợi ý). Các bộ lọc tĩnh trên hình ảnh và biểu tượng có tác động tối thiểu.

CSS filter thực sự làm gì

Thuộc tính CSS filter áp dụng các hiệu ứng đồ họa (làm mờ, điều chỉnh độ tương phản, dịch chuyển màu sắc, đổ bóng) cho một phần tử và các con của nó trước khi trình duyệt vẽ nó lên màn hình. Quá trình xử lý xảy ra hoàn toàn trong pipeline render của trình duyệt, thường được tăng tốc bởi GPU, không có JavaScript tham gia. Các hiệu ứng chỉ là thị giác: HTML cơ bản, file mà hình ảnh tham chiếu và layout đều không thay đổi. Một bức ảnh được hiển thị với filter: grayscale(1) vẫn có màu gốc trong file; trình duyệt chỉ chuyển đổi sang thang xám khi hiển thị.

CSS filter cung cấp mười hàm: blur(px) cho làm mờ Gauss, brightness(n) và contrast(n) cho điều chỉnh tông, saturate(n) cho cường độ màu, hue-rotate(deg) để dịch chuyển bánh xe màu, opacity(n) cho độ trong suốt, grayscale(n) và sepia(n) cho hiệu ứng giảm bão hòa, invert(n) cho đầu ra âm bản, và drop-shadow(...) cho bóng đổ nhận biết hình dạng (không giống box-shadow, drop-shadow tuân theo hình dạng thực sự được render bao gồm độ trong suốt, lý tưởng cho bóng trên các biểu tượng hoặc hình ảnh PNG có cạnh cắt). Các hàm có thể nối với nhau: filter: brightness(1.2) contrast(1.3) saturate(0.9) áp dụng cả ba theo trình tự.

Tại sao điều này quan trọng đối với thiết kế web hiện đại: một thập kỷ trước, việc điều chỉnh độ sáng, sắc thái hoặc độ bão hòa của hình ảnh để có sự nhất quán trong thiết kế đòi hỏi phải xử lý trước mọi hình ảnh trong Photoshop và xuất lại. CSS filter đưa các điều chỉnh tương tự đến runtime, được áp dụng không phá hủy. Bạn có thể phục vụ một hình ảnh duy nhất và trình bày nó theo những cách khác nhau dựa trên chủ đề, trạng thái hover hoặc tùy chọn người dùng. Bạn cũng có thể sử dụng các bộ lọc cho khả năng tiếp cận: một bức ảnh thang xám đảo ngược làm placeholder, hoặc một lớp phủ hình ảnh tối hơn cho khả năng đọc văn bản tương phản cao. Sự đánh đổi là hiệu suất cho một số bộ lọc (đặc biệt là làm mờ) và thực tế là các bộ lọc cũng ảnh hưởng đến các con, có thể đổ tràn không mong đợi.

Công cụ này hoạt động bên dưới như thế nào

Mỗi thanh trượt trong công cụ được gắn với một hàm bộ lọc duy nhất. Khi bạn di chuyển một thanh trượt, JavaScript đọc giá trị, xây dựng chuỗi hàm bộ lọc với giá trị đó (ví dụ: brightness(1.4)), và nối tất cả các hàm đang hoạt động thành một chuỗi CSS filter duy nhất. Chuỗi đó được áp dụng làm style inline trên hình ảnh xem trước, tạo ra phản hồi trực quan ngay lập tức khi trình duyệt vẽ lại với bộ lọc mới. Không có dữ liệu hình ảnh nào được xử lý trong JavaScript: phép toán cấp pixel thực tế xảy ra bên trong công cụ render của trình duyệt, thường trên GPU.

CSS được tạo hiển thị trong hộp mã là cùng một chuỗi được áp dụng cho xem trước. Nhấp Sao chép CSS và công cụ ghi chuỗi đó vào clipboard của bạn bằng API hiện đại navigator.clipboard.writeText(). Chuỗi đã sẵn sàng để dán vào thuộc tính style của bất kỳ phần tử nào hoặc bất kỳ khai báo lớp nào trong stylesheet của bạn. Công cụ cũng hỗ trợ tải hình ảnh của bạn: chọn một file và nó trở thành một URL blob: tạm thời trong trình duyệt, không bao giờ được tải lên đâu, và bộ lọc xem trước trên hình ảnh thực của bạn để bạn có thể điều chỉnh chính xác diện mạo cho nội dung của bạn.

Hành vi đặt lại là theo từng bộ lọc: mỗi thanh trượt có nút đặt lại riêng trả về chỉ bộ lọc đó về giá trị không-hiệu-ứng của nó (1 cho các bội số, 0deg cho hue-rotate, 0px cho blur). Nút Đặt Lại Tất Cả trả tất cả các thanh trượt về trung tính đồng thời. Trạng thái của công cụ chỉ tồn tại trong bộ nhớ; tải lại trang và kết hợp bộ lọc của bạn biến mất. Không có máy chủ nào lưu trữ các giá trị bộ lọc bạn đã chọn, không có phân tích nào theo dõi các kết hợp bạn thử. Công cụ là một sân chơi CSS không trạng thái, được hỗ trợ bởi quảng cáo.

Lịch sử ngắn về các bộ lọc CSS

• Các nguyên hàm bộ lọc SVG, 2001.SVG 1.0 (Khuyến nghị W3C, tháng 9 năm 2001) định nghĩa một hệ thống bộ lọc toàn diện: feGaussianBlur, feColorMatrix, feConvolveMatrix và hàng tá khác. Mô hình bộ lọc SVG mạnh mẽ nhưng dài dòng, và việc áp dụng các bộ lọc SVG cho các phần tử HTML đòi hỏi filter: url(#id) tham chiếu đến SVG inline, không bao giờ được áp dụng rộng rãi trong các quy trình làm việc HTML-first.
• CSS Filter Effects Module Level 1, 2014.W3C xuất bản Filter Effects Module Level 1 (tháng 12 năm 2014), giới thiệu các hàm bộ lọc shorthand đơn giản hóa (blur, brightness, contrast, v.v.) không yêu cầu SVG inline. Những hàm này phù hợp với các nhu cầu xử lý hình ảnh phổ biến nhất trong 95% trường hợp và dễ viết hơn rất nhiều so với các bộ lọc SVG.
• Hỗ trợ trình duyệt đạt khối lượng tới hạn, 2015.Chrome 53 (2015) và Firefox 35 (2015) ra mắt hỗ trợ filter không có tiền tố; Safari có hỗ trợ với tiền tố từ phiên bản 6 (2012). Đến năm 2015, CSS filter có thể sử dụng rộng rãi trên các trang sản xuất. Các nhà thiết kế bắt đầu sử dụng các bộ lọc cho hiệu ứng hover, chuẩn hóa hình ảnh và xử lý trang trí ở quy mô lớn.
• backdrop-filter ra mắt, 2017 đến 2024.Safari 9 (2015) giới thiệu -webkit-backdrop-filter cho hiệu ứng kính mờ. Chromium ra mắt backdrop-filter không có tiền tố trong Chrome 76 (tháng 7 năm 2019). Firefox chờ cho đến phiên bản 103 (tháng 7 năm 2022). Thanh điều hướng mờ kiểu iOS trở thành mẫu UI hiện đại mặc định.
• Chế độ tối thúc đẩy việc áp dụng bộ lọc, 2019.Xu hướng thiết kế chế độ tối (macOS Mojave của Apple 2018, Android 10 2019, iOS 13 2019, trình duyệt prefers-color-scheme 2019) thúc đẩy việc sử dụng bộ lọc cho CSS invert-and-hue-rotate auto dark mode, nơi một quy tắc filter: invert(1) hue-rotate(180deg) đơn lẻ biến một trang chế độ sáng thành một dạng xem chế độ tối có thể chấp nhận được mà không cần thiết kế lại.
• Độ phức tạp của bộ lọc SVG trở lại thông qua CSS, từ năm 2024 trở đi.CSS Filter Effects Module Level 2 (bản nháp) đề xuất các hàm mới và khả năng tạo các pipeline bộ lọc tùy chỉnh mà không cần SVG inline, thu hẹp khoảng cách giữa các hàm shorthand tiện lợi và toàn bộ sức mạnh của các nguyên hàm bộ lọc SVG. Hỗ trợ trình duyệt vẫn đang được triển khai suốt năm 2025.

Quy trình làm việc thực tế

• Chuẩn hóa hình ảnh nhất quán với thương hiệu.Một trang lấy hình ảnh từ nhiều nhiếp ảnh gia hoặc nhà cung cấp stock nhận được độ bão hòa, độ tương phản và độ sáng không nhất quán. Áp dụng bộ lọc CSS đồng nhất cho tất cả các hình ảnh (filter: saturate(0.85) contrast(1.05) brightness(0.95)) đưa tất cả chúng vào cùng một bảng màu mà không cần xử lý trước mỗi file. Đảo ngược bộ lọc cho một hình ảnh cụ thể khi bạn muốn nó nổi bật.
• Trạng thái hover và tương tác.Các hiệu ứng hover sử dụng các chuyển tiếp bộ lọc cảm thấy tinh tế và nhẹ. Hình ảnh thẻ với filter: grayscale(0.5) khi nghỉ và filter: grayscale(0) khi hover tạo ra một lời mời tinh tế để tương tác. Hình thu nhỏ hình ảnh với filter: brightness(0.9) khi nghỉ và brightness(1.1) khi hover làm điều tương tự mà không cần hai file hình ảnh.
• UI kính mờ với backdrop-filter.Lớp phủ modal, thanh điều hướng sticky và popover tooltip sử dụng backdrop-filter: blur(20px) trên nền bán trong suốt tạo ra hiệu ứng kính-mờ kiểu iOS. Điều này hiện được mong đợi trên các trang tiếp thị hiện đại; filter không áp dụng vì chúng ta muốn làm mờ những gì phía sau lớp phủ, không phải chính lớp phủ.
• Theming động và chế độ tối.Chế độ tối giá rẻ: bọc trang của bạn trong một container với filter: invert(1) hue-rotate(180deg) được kích hoạt thông qua truy vấn phương tiện hoặc bật/tắt. Điều này chuyển đổi văn bản tối thành sáng, nền sáng thành tối, trong khi vẫn duy trì hầu hết các màu. Đây là một chiến thắng nhanh chóng xử lý 80% yêu cầu chế độ tối mà không cần thiết kế hai chủ đề. Hình ảnh thực sự nên được loại trừ bằng filter: invert(1) hue-rotate(180deg) lồng nhau để hoàn tác đảo ngược, nếu không ảnh trông lạ.
• Công cụ tiếp cận và chế độ tương phản cao.Người dùng bị suy giảm thị lực có thể áp dụng các bộ lọc cấp trình duyệt (tiện ích mở rộng tương phản cao của Chrome, đảo ngược cấp OS) nhưng các nhà thiết kế cũng có thể cung cấp các nút bật/tắt bộ lọc cấp trang: một nút áp dụng filter: contrast(2) cho toàn bộ trang cho người dùng có thị lực kém. WebAIM và WCAG không yêu cầu điều này, nhưng nó là một phép lịch sự về khả năng tiếp cận chi phí thấp mà một số trang thêm vào.
• Xử lý ảnh nghệ thuật.Tông nâu đỏ, vẻ vintage, hiệu ứng ảnh blueprint và các xử lý nghệ thuật khác kết hợp các hàm bộ lọc: filter: sepia(1) hue-rotate(200deg) saturate(1.5) brightness(0.8) tạo ra một vẻ vintage tông lạnh trong một khai báo. So với các preset của trình chỉnh sửa hình ảnh, CSS filter không phá hủy và có thể điều chỉnh trực tiếp mà không cần xuất lại.

Cạm bẫy phổ biến và ý nghĩa của chúng

• Blur là bộ lọc đắt đỏ.Trong số các hàm bộ lọc, blur() là tốn nhiều GPU nhất, đặc biệt ở bán kính lớn (trên 20px) trên các phần tử lớn. Animate blur hoặc áp dụng nó cho nhiều phần tử cùng lúc có thể làm giảm tốc độ khung hình một cách đáng kể. Đối với thanh điều hướng mờ sticky, blur bao phủ một khu vực nhỏ và chạy tốt; đối với các blur modal toàn màn hình, hãy mong đợi một khoảng giật ngắn trên các thiết bị cấp thấp. Các bộ lọc khác (contrast, brightness, saturate) gần như miễn phí trong các GPU hiện đại.
• Bộ lọc ảnh hưởng đến tất cả con cháu.Áp dụng filter cho một container ảnh hưởng đến mọi phần tử con bên trong nó. Nếu bạn bọc một thẻ trong một container với filter: grayscale(1), văn bản bên trong cũng trở thành thang xám (thường không thay đổi gì vì văn bản đã là đơn sắc) và bất kỳ phần tử con có màu nào (biểu tượng, huy hiệu) đều mất màu. Để chỉ lọc các con cụ thể, áp dụng bộ lọc cho từng cái riêng lẻ, không phải cho cha.
• Độ tương phản thấp làm tổn hại khả năng đọc.Giảm độ tương phản (filter: contrast(0.5)) trên một thẻ có văn bản bên trong làm cho văn bản khó đọc hơn, thường đẩy nó xuống dưới tỷ lệ tương phản WCAG AA 4.5:1 cho văn bản bình thường. Áp dụng các bộ lọc giảm độ tương phản một cách cẩn thận; kiểm tra rằng bất kỳ văn bản nào ở trên vẫn có thể đọc được. Đối với các phần tử chỉ trang trí (hình ảnh nền, dấu phân cách), độ tương phản giảm là tốt.
• Bộ lọc không thay đổi khu vực hit.Không giống như clip-path, CSS filter không thay đổi khu vực có thể nhấp được của một phần tử. Một nút với filter: blur(5px) trông mềm mại và không lấy nét nhưng vẫn có thể nhấp được hoàn toàn trên toàn bộ hình chữ nhật ban đầu của nó. Điều này thường được mong muốn nhưng có thể gây ngạc nhiên khi một phần tử ghosted hoặc disabled-looking vẫn kích hoạt khi nhấp. Kết hợp filter với pointer-events: none để thực sự vô hiệu hóa tương tác.
• Safari cần tiền tố -webkit- cho backdrop-filter.Thuộc tính filter cơ bản không có tiền tố trong tất cả các trình duyệt hiện đại. Nhưng backdrop-filter vẫn yêu cầu tiền tố -webkit-backdrop-filter trong Safari (bao gồm các phiên bản mới hơn). Đối với các hiệu ứng kính mờ chéo-trình-duyệt, khai báo cả -webkit-backdrop-filter và backdrop-filter với cùng giá trị. Các trình tự động thêm tiền tố xử lý điều này; nếu bạn viết CSS bằng tay, hãy nhớ tiền tố.
• Animate chuỗi bộ lọc bị nhảy.Các chuyển tiếp CSS trên filter nội suy mượt mà khi chuỗi bộ lọc vẫn giữ nguyên (ví dụ: chuyển tiếp blur(0px) sang blur(10px)). Nhưng việc thêm hoặc xóa các hàm giữa chuyển tiếp (ví dụ: chuyển từ blur(0px) sang blur(10px) brightness(1.2)) snap đột ngột. Đối với các chuyển tiếp đa-bộ-lọc mượt mà, khai báo tất cả các bộ lọc ở cả trạng thái đầu và cuối với các giá trị cơ sở phù hợp (brightness(1) là mặc định).

Quyền riêng tư: mọi thứ xảy ra trong trình duyệt của bạn

Các công cụ tạo CSS đến trong hai hương vị: các trang HTML đơn giản chạy JavaScript phía client (riêng tư, nhanh) và các trình chỉnh sửa đám mây lưu các dự án của bạn (cộng tác nhưng với sự đánh đổi về quyền riêng tư). Công cụ này thuộc loại đầu tiên. Các giá trị thanh trượt của bạn, CSS được tạo của bạn, và thậm chí bất kỳ hình ảnh nào bạn tải lên để xem trước đều ở lại hoàn toàn trong phiên trình duyệt của bạn. Tải lại trang và trạng thái biến mất trừ khi bạn sao chép CSS trước hoặc lưu một screenshot.

Tính năng tải lên hình ảnh của riêng bạn đáng được lưu ý về quyền riêng tư: khi bạn chọn một file, trình duyệt tạo ra một URL blob: cục bộ trỏ đến bộ nhớ, và bản xem trước hiển thị hình ảnh của bạn với bộ lọc được áp dụng. Không có yêu cầu nào đi đến bất kỳ máy chủ nào. Mở tab Network của trình duyệt trong khi tải lên; bạn sẽ thấy không có lưu lượng truy cập ra. Hình ảnh chỉ tồn tại trong bộ nhớ của tab trình duyệt của bạn và bị xóa khi bạn đóng tab. Đối với hình ảnh bí mật (thiết kế độc quyền, quét y tế, screenshot được bảo vệ NDA), đây là thuộc tính quyền riêng tư quan trọng.

Khi một công cụ khác là lựa chọn đúng

• Photoshop hoặc Lightroom cho chỉnh sửa vĩnh viễn.CSS filter chỉ là tại thời điểm hiển thị: file hình ảnh cơ bản không thay đổi. Nếu bạn muốn file hình ảnh thực sự có các điều chỉnh đó được nướng vào (kích thước file nhỏ hơn, tải trang nhanh hơn, không có nguy cơ fallback không được lọc trong các trình duyệt cũ), chỉnh sửa hình ảnh trong Photoshop, Lightroom, GIMP hoặc Affinity Photo. CSS filter dành cho hiển thị động; trình chỉnh sửa hình ảnh dành cho xử lý vĩnh viễn.
• Image Filters cho xử lý hàng loạt một lần.Công cụ Image Filters của chúng tôi áp dụng các hiệu ứng bộ lọc tương tự nhưng tạo ra một PNG/JPG có thể tải xuống với bộ lọc được nướng vào. Đối với việc xử lý nhiều hình ảnh một cách nhất quán cho danh mục đầu tư, bộ truyền thông xã hội hoặc thư viện tài sản, quy trình làm việc đó nhanh hơn so với việc áp dụng các bộ lọc CSS tại runtime. Cả hai công cụ phục vụ các trường hợp sử dụng khác nhau.
• Bộ lọc SVG cho các hiệu ứng phức tạp.Các shorthand CSS filter bao gồm hầu hết các nhu cầu nhưng không phải tất cả. Biến dạng lượn sóng, các kernel tích chập tùy chỉnh (phát hiện cạnh, dập nổi), các mẫu nhiễu feTurbulence, bản đồ displacement: tất cả yêu cầu các nguyên hàm bộ lọc SVG thông qua SVG inline cộng với filter: url(#myFilter). Viết các bộ lọc SVG khó hơn nhưng mở khóa các hiệu ứng mà shorthand CSS filter không thể tạo ra.
• Các thuộc tính tùy chỉnh CSS cho theming.Thủ thuật invert dark mode sử dụng filter có những hạn chế: ảnh trông sai, màu sắc bị dịch chuyển, hiệu suất có thể bị ảnh hưởng. Đối với chế độ tối chất lượng sản xuất, các thuộc tính tùy chỉnh CSS (--bg-color, --text-color) với hai bộ chủ đề khác biệt thì sạch hơn. Chế độ tối dựa trên bộ lọc là một chiến thắng nhanh chóng, không phải là một giải pháp được hoàn thiện.

Các câu hỏi thường gặp khác

Tôi có thể animate các thay đổi CSS filter một cách mượt mà không?

Có, với những cảnh báo. Thuộc tính filter có thể animate được trong CSS, và các chuyển tiếp giữa hai chuỗi bộ lọc với cùng các hàm trong cùng một thứ tự nội suy mượt mà (blur(0px) brightness(1) sang blur(10px) brightness(1.5) hoạt động). Thêm hoặc xóa các hàm giữa chuyển tiếp snap đột ngột. Đối với animation đa-bộ-lọc mượt mà, liệt kê mọi hàm bạn muốn chuyển tiếp ở cả trạng thái đầu và cuối, sử dụng các giá trị trung tính (brightness(1), saturate(1), blur(0px)) ở những nơi bạn không muốn một bộ lọc cụ thể được áp dụng.

CSS filter có hoạt động trên hình ảnh nền không?

Có. CSS filter áp dụng cho toàn bộ phần tử bao gồm hình ảnh nền, nội dung và các phần tử con của nó. Nếu bạn muốn chỉ lọc hình ảnh nền nhưng không lọc nội dung phía trước, phương pháp tiêu biểu là sử dụng một phần tử con riêng cho nền (ví dụ: một pseudo-element ::before được định vị) với bộ lọc được áp dụng cho nó, sau đó đặt nội dung là anh chị em không được lọc ở trên. Thuộc tính backdrop-filter cũng hữu ích khi bạn muốn lọc những gì có thể nhìn thấy phía sau một phần tử trong suốt.

Các bộ lọc CSS có được lập chỉ mục bởi các công cụ tìm kiếm không?

Các bộ lọc CSS hoàn toàn là thị giác và không thay đổi nội dung HTML. Các công cụ tìm kiếm lập chỉ mục nội dung cơ bản (alt text hình ảnh, văn bản xung quanh) như thể bộ lọc không được áp dụng. Một hình ảnh thang xám với filter: grayscale(1) vẫn được lập chỉ mục là hình ảnh màu gốc dựa trên file của nó và alt text. Đây thường là điều bạn muốn: không có tác dụng phụ của bộ lọc đối với SEO hoặc các trình đọc màn hình.

Tại sao drop-shadow trông khác với box-shadow?

Box-shadow vẽ một bóng xung quanh hộp hình chữ nhật của một phần tử, bỏ qua bất kỳ độ trong suốt nào. Drop-shadow (filter) vẽ một bóng tuân theo hình dạng thực sự được render, bao gồm các vùng trong suốt. Đối với một biểu tượng SVG với các cạnh cắt hoặc một PNG với độ trong suốt, drop-shadow tạo ra một bóng nhận biết hình dạng phù hợp với đường viền có thể nhìn thấy. Box-shadow trên cùng một phần tử sẽ hiển thị một bóng hình chữ nhật xung quanh bounding box, trông sai. Sử dụng drop-shadow cho các bóng nhận biết hình dạng, box-shadow cho các phần tử hình chữ nhật.

Sự khác biệt giữa opacity và filter: opacity() là gì?

Trong hầu hết các trình duyệt, chúng tạo ra kết quả giống hệt nhau về mặt thị giác. Sự khác biệt kỹ thuật: opacity là một thuộc tính cấp cao nhất, trong khi filter: opacity() là một phần của chuỗi bộ lọc và kết hợp với các bộ lọc khác. Nếu bạn có filter: blur(5px) opacity(0.5), cả hai áp dụng cùng nhau như một thao tác GPU duy nhất. Sử dụng opacity ngoài chuỗi bộ lọc hoạt động giống nhau trong hầu hết các trường hợp. Sử dụng opacity cho độ trong suốt độc lập; chỉ sử dụng filter: opacity() khi nối với các bộ lọc khác.

Tôi có thể đặt lại tất cả các bộ lọc nhanh chóng không?

Có. Đặt filter: none để xóa tất cả các bộ lọc trong một khai báo. Đây là cách sạch nhất để đặt lại, đặc biệt cho các trạng thái hover nơi bạn muốn loại bỏ tất cả các hiệu ứng bộ lọc khi hover-out. Hoặc, đặt mỗi hàm bộ lọc về giá trị trung tính của nó: filter: brightness(1) contrast(1) saturate(1) blur(0px) hue-rotate(0deg) grayscale(0) sepia(0) invert(0) opacity(1) tương đương về mặt chức năng với filter: none nhưng dài dòng hơn.