Bất kỳ cách nào để có được bóng hộp ở bên trái và bên phải (ngang?) Chỉ không có hack hoặc hình ảnh. Tôi đang dùng:

box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);

Nhưng nó cho bóng tối xung quanh.

Tôi không có biên giới xung quanh các yếu tố.

LƯU Ý: Tôi đề nghị kiểm tra câu trả lời của @ Hamish bên dưới; nó không liên quan đến "mặt nạ" không hoàn hảo trong giải pháp được mô tả ở đây.

Bạn có thể đến gần với nhiều bóng hộp; một cho mỗi bên

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

Biên tập

Thêm 2 bóng hộp nữa cho phần trên và dưới lên phía trước để che đi phần chảy máu chảy qua.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

Tôi không hài lòng với phần trên và dưới được làm tròn với bóng hiện diện trong giải pháp của Deefour nên đã tạo ra cái riêng của tôi.

inset box-shadow tạo ra một bóng đồng phục đẹp với cắt trên và dưới.

Để sử dụng hiệu ứng này trên các mặt của phần tử của bạn, hãy tạo hai phần tử giả :beforevà :afterđịnh vị hoàn toàn trên các mặt của phần tử gốc.

div:before, div:after {
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  width: 15px;
}
div:before {
  box-shadow: -15px 0 15px -15px inset;
  left: -15px;
}
div:after {
  box-shadow: 15px 0 15px -15px inset;
  right: -15px;
}

div {
  background: #EEEEEE;
  height: 100px;
  margin: 0 50px;
  width: 100px;
  position: relative;
}

<div></div>

Biên tập

Tùy thuộc vào thiết kế của bạn, bạn có thể sử dụng clip-path, như thể hiện trong câu trả lời của @ Luke. Tuy nhiên, lưu ý rằng trong nhiều trường hợp, điều này vẫn dẫn đến hiện tượng bóng mờ ở phía trên và phía dưới như bạn có thể thấy trong ví dụ này:

div {
  width: 100px;
  height: 100px;
  background: #EEE;
  box-shadow: 0 0 15px 0px #000;
  clip-path: inset(0px -15px 0px -15px);
  position: relative;
  margin: 0 50px;
}

<div></div>

Hãy thử điều này, nó làm việc cho tôi:

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;

Phương pháp cổ điển: Lan truyền tiêu cực

Bóng hộp CSS sử dụng 4 tham số: h-bóng, v-bóng, mờ, trải:

box-shadow: 10px 0 8px -8px black;

Các v-shadow (bóng verical) được đặt thành 0.

Các mờ tham số bổ sung thêm các hiệu ứng gradient, nhưng cũng cho biết thêm một cái bóng nhỏ trên biên giới dọc (mà chúng ta muốn thoát khỏi).

Sự lan truyền tiêu cực làm giảm bóng trên tất cả các viền: bạn có thể chơi với nó khi cố gắng loại bỏ bóng dọc nhỏ bé đó mà không ảnh hưởng quá nhiều đến một bên (dễ dàng hơn cho các bóng nhỏ, 5 đến 10px.)

Dưới đây là một fiddle ví dụ.

Cách tiếp cận thứ hai: Div tuyệt đối ở bên

Thêm một div trống trong thành phần của bạn và định kiểu nó với định vị tuyệt đối để nó không ảnh hưởng đến nội dung của thành phần.

Ở đây, fiddle với một ví dụ về trái bóng.

<div id="container">
  <div class="shadow"></div>
</div>

.shadow{
    position:absolute;
    height: 100%;
    width: 4px;
    left:0px;
    top:0px;
    box-shadow: -4px 0 3px black;
}

Thứ ba: Mặt nạ bóng

Nếu bạn có một nền cố định, bạn có thể ẩn hiệu ứng bóng bên với hai bóng mặt nạ có cùng màu của nền và mờ = 0, ví dụ:

box-shadow: 
    0 -6px white,          // Top Masking Shadow
    0 6px white,           // Bottom Masking Shadow
    7px 0 4px -3px black,  // Left-shadow
    -7px 0 4px -3px black; // Right-shadow

Tôi đã thêm một lần nữa một mức chênh lệch âm (-3px) vào bóng đen, vì vậy nó không vượt ra ngoài các góc.

Đây là câu đố .

Điều này hoạt động tốt cho tất cả các trình duyệt:

-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;

BẢN GIỚI THIỆU

Bạn phải sử dụng nhiều box-shadow;. Inset property làm cho nó trông đẹp và bên trong

div {
    box-shadow: inset 0 12px  15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px  8px -4px rgba(31, 73, 125, 0.8);
    width: 100px;
    height: 100px;
    margin: 50px;
    background: white;
}

Một cách khác là với: overflow-y:hiddentrên cha mẹ với phần đệm.

#wrap {
    overflow-y: hidden;
    padding: 0 10px;
}
#wrap > div {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 20px -5px red;
}

http://jsfiddle.net/qqx221c8/

clip-pathbây giờ (2020) là cách tốt nhất mà tôi đã tìm thấy để đạt được bóng hộp trên các mặt cụ thể của các yếu tố, đặc biệt khi hiệu ứng bắt buộc là bóng "cắt sạch" ở các cạnh cụ thể , như thế này:

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px -15px);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}

<div class="shadow-element"></div>

... trái ngược với một bóng bị suy giảm / giảm / mỏng như thế này:

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}

<div class="shadow-element"></div>

Chỉ cần áp dụng CSS sau đây cho phần tử được đề cập:

box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

Ở đâu:

• Apx thiết lập khả năng hiển thị bóng cho cạnh trên
• Bpx đúng
• Cpx dưới cùng
• Dpx trái

Nhập giá trị 0 cho bất kỳ cạnh nào trong đó bóng sẽ bị ẩn và giá trị âm (giống như kết quả kết hợp của bán kính mờ + giá trị trải - - Xpx + Ypxcho bất kỳ cạnh nào mà bóng sẽ được hiển thị.

box-shadow: 0 5px 5px 0 #000;

Nó hoạt động về phía tôi. Hy vọng, nó sẽ giúp bạn.

NICE INSET SHADOW TRÊN TRÁI PHIẾU VÀ QUYỀN CHO CÁC DIVS, HÌNH ẢNH HOẶC NỘI DUNG

Để có bóng trong đẹp ở bên phải và bên trái trên hình ảnh hoặc bất kỳ nội dung nào khác, hãy sử dụng nó theo cách này

*** Chỉ số z: -1 thực hiện một mẹo hay khi hiển thị hình ảnh hoặc các đối tượng bên trong có phần trong

<html>
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>

<style>

.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}

.innercontent{
z-index:-1
}
</style>
</html>

Trong một số tình huống, bạn có thể ẩn bóng bằng một container khác. Ví dụ: nếu có DIV ở trên và dưới DIV với bóng, bạn có thể sử dụng position: relative; z-index: 1;trên các DIV xung quanh.

Chỉ dành cho chiều ngang, bạn có thể đánh lừa bóng hộp bằng cách sử dụng tràn trên div cha của nó:

<div class="parent">
  <div class="box-shadow">content</div>
</div>

.parent{
  overflow:hidden;
}
.box-shadow{
  box-shadow: box-shadow: 0 5px 5px 0 #000;
}

Một ý tưởng khác có thể là tạo ra một yếu tố giả mờ tối cuối cùng với độ trong suốt để bắt chước bóng tối. Làm cho nó với chiều cao ít hơn một chút và chiều rộng hơn ig

Bạn có thể sử dụng 1 div bên trong đó để "xóa" bóng:

.yourdiv{
    position:relative;
    width:400px;
    height:400px;
    left:10px;
    top:40px;
    background-color:white;
    box-shadow: 0px 0px 1px 0.5px #5F5F5F;

}
.erase{
    position:absolute;
    width:100%;
    top:50%;
    height:105%;
    transform:translate(0%,-50%);
    background-color:white;
}

Bạn có thể chơi với "height:%;" và "chiều rộng:%;" để xóa những gì bạn muốn.

Vì lý do nào, câu trả lời được cung cấp ở đây sẽ không hoạt động trong trường hợp của tôi. Vì vậy, tôi đã sáng tạo. Đây là một giải pháp mới cho bạn tất cả những gì sử dụng linear-gradient()thay thế box-shadow.

p {
  padding: 1rem;
  background-color: #b55;
  color: white;
  background-image: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0) .5rem, rgba(0,0,0,0), rgba(0,0,0,0.0) calc(100% - .5rem), rgba(0,0,0,0.5));
}

<p>Testing</p>

Mặc dù tôi không muốn tranh luận về vấn đề này, nhưng đây không thực sự là một "chiếc hộp" mà bạn (chúng tôi) đang cố gắng hình thành, vì vậy tôi cho rằng có thể nói rằng box-shadowkhông có ý nghĩa gì khi bắt đầu.

Tôi đã cố gắng sao chép bootstrap Shadow-sm ở bên phải, đây là mã của tôi:

.shadow-rs{
    box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}