Bóng hộp có được css hỗ trợ không?

Ví dụ, tôi nhận thấy rằng Google không thêm

.my-container {
    -webkit-box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
    box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
}

9 vào CSS

Đây là CSS cho phần tử này

.RNNXgb {
    background: #fff;
    display: flex;
    border: 1px solid transparent;
    box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
    height: 39px;
    width: 690px;
    border-radius: 24px;
    z-index: 3;
    height: 44px;
    margin: 0 auto;
}

Tôi không chắc mình có nên đưa

.my-container {
    -webkit-box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
    box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
}

9 vào hộp bóng của mình không?

.my-container {
    -webkit-box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
    box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
}

hoặc tôi nên sử dụng

.my-container {
       box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
}

Để cung cấp khung xung quanh hình ảnh hoặc tạo lề trong trong trường hợp hộp văn bản, hãy thêm thuộc tính đệm

padding: 8px;

Và thêm một đường viền để đánh dấu hộp bằng thuộc tính đường viền cổ điển

border: 1px solid # CCC;

Cuối cùng chúng ta có thể làm tròn các góc

border-radius:6px;
-moz-border-radius:6px; 

Xem toàn bộ mã vào nguồn của cuộc biểu tình

Bài kiểm tra tính tương thích

Các quy tắc hoạt động trên trình duyệt hiện tại hiển thị hình vuông màu lục có bóng, nếu không thì chỉ có hình vuông màu lục

Bạn có thể chọn từ hơn 3000 trình duyệt dành cho máy tính để bàn và thiết bị di động, bao gồm Chrome, Safari, Internet Explorer, Edge, Yandex, Opera và Firefox, cho phép bạn đảm bảo rằng khách hàng của mình có được trải nghiệm pixel hoàn hảo trên mọi kích thước màn hình, thiết bị, hệ điều hành,

Kiểm tra tất cả các trình duyệt

Thuộc tính

.my-container {
       box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
}

1 trong CSS dùng để tạo bóng đổ cho các phần tử (đôi khi được gọi là “thả bóng”, ala Photoshop/Figma)

.card {
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

Cú pháp đó là

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

1. Độ lệch ngang (bắt buộc) của bóng, dương nghĩa là bóng sẽ ở bên phải hộp, độ lệch âm sẽ đặt bóng ở bên trái hộp
2. Độ lệch dọc (bắt buộc) của bóng, giá trị âm có nghĩa là bóng hộp sẽ ở trên hộp, giá trị dương có nghĩa là bóng sẽ ở dưới hộp
3. Bán kính làm mờ (bắt buộc), nếu đặt bằng 0 thì bóng sẽ sắc nét, số càng cao thì càng mờ và càng ra xa thì bóng càng mở rộng. Chẳng hạn, một bóng có độ lệch ngang 5px cũng có bán kính mờ 5px sẽ có tổng bóng là 10px
4. Bán kính trải rộng (tùy chọn), giá trị dương tăng kích thước của bóng, giá trị âm giảm kích thước. Mặc định là 0 (bóng có cùng kích thước với mờ)
5. Màu (bắt buộc) – nhận bất kỳ giá trị màu nào, như hex, có tên, rgba hoặc hsla. Nếu giá trị màu bị bỏ qua, bóng hộp sẽ được vẽ bằng màu nền trước (văn bản

   .my-container {
          box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
   }
   

   2). Nhưng hãy lưu ý, các trình duyệt WebKit cũ hơn (trước Chrome 20 và Safari 6) sẽ bỏ qua quy tắc khi màu bị bỏ qua

Sử dụng màu bán trong suốt như

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

0 là phổ biến nhất và mang lại hiệu ứng đẹp, vì nó không che phủ hoàn toàn/mờ những gì ở trên, nhưng cho phép những gì bên dưới hiện ra một chút, giống như một cái bóng thực sự

ví dụ

Dự phòng nhúng CodePen

bóng tối bên trong

Bạn sử dụng từ khóa

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

1

.my-container {
    -webkit-box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
    box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
}

0

Lịch sử cổ đại

Đây là đoạn trích có tiền tố của nhà cung cấp hỗ trợ trình duyệt sâu nhất có thể

.my-container {
    -webkit-box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
    box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
}

1

Bạn thậm chí có thể làm cho bóng hộp hoạt động trong IE 8. Bạn cần một yếu tố bổ sung, nhưng điều đó có thể thực hiện được với ________ 72

.my-container {
    -webkit-box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
    box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
}

3____14

Chỉ Một Bên

Sử dụng bán kính trải rộng âm, bạn có thể bị ép trong bóng hộp và chỉ đẩy nó ra khỏi một cạnh của hộp

.my-container {
    -webkit-box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
    box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
}

5

Nhiều đường viền và hơn thế nữa

Bạn có thể tách bóng hộp bằng dấu phẩy bao nhiêu lần tùy thích. Chẳng hạn, điều này cho thấy hai bóng có vị trí khác nhau và màu sắc khác nhau trên cùng một phần tử

.my-container {
    -webkit-box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
    box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
}

6

Ví dụ cho thấy cách bạn có thể sử dụng điều đó để tạo nhiều đường viền

Dự phòng nhúng CodePen

Bằng cách áp dụng bóng cho các phần tử giả mà sau đó bạn thao tác, bạn có thể có được một số bóng hộp trông 3D đẹp mắt

Dự phòng nhúng CodePen

Bóng siêu mịn thông qua nhiều giá trị được phân tách bằng dấu phẩy

Dự phòng nhúng CodePen

So sánh với box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];3

Họ có thể làm những điều tương tự. Nhưng ngoài ra, hãy chờ đợi nó, những thứ khác nhau. Đây là một bài viết chuyên sâu về điều này. Có lẽ điều quan trọng nhất cần biết là một

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

2 sẽ ôm sát các cạnh của một phần tử hơn là

.my-container {
       box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
}

1 hình chữ nhật sẽ làm (mặc dù bóng hộp có ôm các góc tròn)

Dự phòng nhúng CodePen

hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên

Box shadow có được hỗ trợ bởi tất cả các trình duyệt không?

Làm cách nào để sử dụng bóng đổ trong CSS?

Bạn có thể làm động CSS bóng hộp không?

Có bao nhiêu loại bóng đổ trong CSS?