Tôi đang cố gắng áp dụng một box-shadowtrên cả bốn mặt. Tôi chỉ có thể nhận được nó trên 2 mặt:

Đó là do x và y bù lại. Thử đi:

-webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;

chỉnh sửa (năm sau ..): Làm cho câu trả lời nhiều trình duyệt hơn, như được yêu cầu trong nhận xét :)

btw: có rất nhiều trình tạo css3 ngày nay .. css3.me , css3maker , css3generator , v.v.

Xem: http://jsfiddle.net/thirtydot/cMNX2/8/

input {
    -webkit-box-shadow: 0 0 5px 2px #fff;
    -moz-box-shadow: 0 0 5px 2px #fff;
    box-shadow: 0 0 5px 2px #fff;
}

Cái này trông thật tuyệt.

-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;

Chỉ đơn giản như mã này:

box-shadow: 0px 0px 2px 2px black; /*any color you want*/

Hiểu cú pháp box-shadow và viết nó cho phù hợp

box-shadow: h-offset v-offset blur spread color;

h-offset: Độ lệch ngang của bóng. Giá trị dương đặt bóng ở bên phải hộp, giá trị âm đặt bóng ở bên trái hộp - Bắt buộc

v-offset: Độ lệch dọc của bóng đổ. Giá trị dương đặt bóng bên dưới hộp, giá trị âm đặt bóng bên trên hộp - Bắt buộc

mờ: Bán kính làm mờ (Số càng cao, bóng càng mờ) - Tùy chọn

màu sắc: Màu của bóng - Tùy chọn

spread: Bán kính lan truyền. Giá trị dương làm tăng kích thước của bóng, giá trị âm làm giảm kích thước của bóng - Tùy chọn

chèn: Thay đổi bóng từ bóng bên ngoài thành bóng bên trong - Tùy chọn

box-shadow: 0 0 10px #999;

box-shadow hoạt động tốt hơn với spread

box-shadow: 0 0 10px 8px #999;

sử dụng 'chèn' để áp dụng bóng bên trong hộp

box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;

sử dụng rgba (xanh đỏ alpha alpha) để điều chỉnh bóng hiệu quả hơn

box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8); 
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8); 

Giải pháp đơn giản nhất và cách dễ nhất là thêm bóng cho cả bốn mặt. CSS

box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/

Tôi đã tìm thấy trang web http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/ .

.allSides
{
    width:350px;height:200px;
    border: solid 1px #555;
    background-color: #eed;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

CSS3 box-shadow: 4 cạnh đối xứng

1. mỗi bên cùng màu

:root{
  --color: #f0f;
}

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background: #ccc;
}

.four-sides-with-same-color {
  box-shadow: 0px 0px 10px 5px var(--color);
}

<div class="four-sides-with-same-color"></div>

2. mỗi bên với một màu khác nhau

:root{
  --color1: #00ff4e;
  --color2: #ff004e;
  --color3: #b716e6;
  --color4: #FF5722;
}

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background-color: rgba(255,255,0,0.7);
}

.four-sides-with-different-color {
  box-shadow: 
    10px 0px 5px 0px var(--color1),
    0px 10px 5px 0px var(--color2),
    -10px 0px 5px 0px var(--color3),
    0px -10px 5px 0px var(--color4);
}

<div class="four-sides-with-different-color"></div>

ảnh chụp màn hình

refs

https://css-tricks.com/almanac/properties/b/box-shadow/

https://www.cnblogs.com/xgqfrms/p/13264347.html

Sử dụng mã css này cho tất cả bốn mặt: box-shadow: 0px 1px 7px 0px rgb (106, 111, 109);

Bạn có thể kết hợp khác nhau tại liên kết sau.
https://www.cssmatic.com/box-shadow

Kết quả mà bạn cần có thể đạt được bằng CSS sau

-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);