มีวิธีใดที่จะทำให้กล่องเงาอยู่ทางด้านซ้ายและขวา (แนวนอน?) โดยไม่มีแฮ็กหรือรูปภาพ ฉันใช้:

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

แต่มันให้เงารอบ ๆ

ฉันไม่มีพรมแดนล้อมรอบองค์ประกอบ

หมายเหตุ:ฉันขอแนะนำให้ดูคำตอบของ @ Hamishด้านล่าง; ไม่เกี่ยวข้องกับ "การปิดบัง" ที่ไม่สมบูรณ์ในโซลูชันที่อธิบายไว้ที่นี่

คุณสามารถเข้าใกล้ด้วยกล่องเงาหลายกล่อง หนึ่งสำหรับแต่ละด้าน

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/

แก้ไข

เพิ่มอีกสองกล่องเงาสำหรับด้านบนและด้านล่างขึ้นด้านหน้าเพื่อปกปิดคราบเลือดที่ไหลออกมา

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/

ฉันไม่พอใจกับการโค้งมนบนและล่างของเงาในโซลูชันของ Deefour ดังนั้นฉันจึงสร้างขึ้นเอง

inset box-shadow สร้างเงาที่มีความสวยงามด้วยการตัดด้านบนและด้านล่าง

ในการใช้เอฟเฟกต์นี้ที่ด้านข้างขององค์ประกอบของคุณให้สร้างองค์ประกอบหลอกสององค์ประกอบ:beforeและ:afterวางตำแหน่งไว้ที่ด้านข้างขององค์ประกอบต้นฉบับ

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>

แก้ไข

คุณอาจใช้งานclip-pathได้ตามที่แสดงในคำตอบของ @ Luke ทั้งนี้ขึ้นอยู่กับการออกแบบของคุณ อย่างไรก็ตามโปรดทราบว่าในหลายกรณีนี้ยังคงส่งผลให้เกิดเงาที่ด้านบนและล่างตามที่คุณเห็นในตัวอย่างนี้:

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>

ลองสิ่งนี้มันใช้งานได้สำหรับฉัน:

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

วิธีการคลาสสิก: การแพร่กระจายเชิงลบ

CSS box-shadowใช้ 4 พารามิเตอร์: h-shadow, v-shadow, เบลอ, การแพร่กระจาย:

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

V-เงา (เงา Verical) ตั้งค่าเป็น 0

เบลอพารามิเตอร์เพิ่มผลการไล่ระดับสี แต่เพิ่มยังมีเงาเล็กน้อยบนเส้นขอบแนวตั้ง (หนึ่งเราต้องการที่จะได้รับการกำจัด)

การแพร่กระจายเชิงลบช่วยลดเงาบนเส้นขอบทั้งหมด: คุณสามารถเล่นกับมันโดยพยายามลบเงาแนวดิ่งเล็ก ๆ นั้นโดยไม่ส่งผลกระทบใด ๆ ต่อขอบด้านข้างมากเกินไป (ง่ายกว่าสำหรับเงาขนาดเล็ก 5 ถึง 10px)

นี่คือตัวอย่างซอ

วิธีที่สอง: แอบโซลูท div ที่ด้านข้าง

เพิ่ม div ว่างในองค์ประกอบของคุณและจัดรูปแบบด้วยการจัดตำแหน่งที่แน่นอนดังนั้นมันจึงไม่ส่งผลกระทบต่อเนื้อหาองค์ประกอบ

นี่คือซอกับตัวอย่างของเงาด้านซ้าย

<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;
}

ประการที่สาม: เงากาว

หากคุณมีพื้นหลังคงที่คุณสามารถซ่อนเอฟเฟกต์เงาด้านข้างด้วยสองเงาที่มีสีเดียวกันของพื้นหลังและเบลอ = 0 ตัวอย่าง:

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

ฉันได้เพิ่มการแพร่กระจายเชิงลบอีกครั้ง (-3px) ลงในเงาดำดังนั้นมันจึงไม่ยืดเลย

นี่ซอ

วิธีนี้ใช้ได้ดีสำหรับเบราว์เซอร์ทั้งหมด:

-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;

การสาธิต

คุณต้องใช้หลายbox-shadow;อย่าง คุณสมบัติสิ่งที่ใส่เข้าไปทำให้ดูดีและอยู่ภายใน

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;
}

อีกวิธีคือด้วย: overflow-y:hiddenในผู้ปกครองที่มีการขยาย

#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-pathคือตอนนี้ (2020) วิธีที่ดีที่สุดที่ฉันได้พบเพื่อให้ได้เงาบนกล่องขององค์ประกอบเฉพาะโดยเฉพาะอย่างยิ่งเมื่อผลที่ต้องการคือเงา "clean cut" ที่ขอบเฉพาะเช่น:

.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>

... ตรงข้ามกับเงาที่ถูกลดทอน / ลด / การทำให้ผอมบางแบบนี้:

.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>

เพียงใช้ CSS ต่อไปนี้กับองค์ประกอบที่เป็นปัญหา:

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

ที่ไหน:

• Apx ตั้งค่าการมองเห็นเงาสำหรับขอบด้านบน
• Bpx ขวา
• Cpx ด้านล่าง
• Dpx ซ้าย

ป้อนค่า 0 สำหรับขอบใด ๆ ที่ควรซ่อนเงาและค่าลบ (เหมือนกับผลรวมของรัศมีการเบลอ + ค่าการแพร่กระจาย - Xpx + Ypx) ไปที่ขอบใด ๆ ที่ควรแสดงเงา

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

มันทำงานในด้านของฉัน หวังว่ามันจะช่วยคุณ

นีซแทรกลงบนด้านซ้ายและขวาสำหรับนักดำน้ำภาพหรือเนื้อหาภายใน

สำหรับเงาที่ใส่เข้าไปทางด้านซ้ายและด้านขวาของภาพหรือเนื้อหาอื่น ๆ ให้ใช้วิธีนี้

*** ดัชนี z: -1 เป็นกลอุบายที่ดีเมื่อแสดงภาพหรือวัตถุภายในด้วยสิ่งที่ใส่เข้าไป

<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>

ในบางสถานการณ์คุณสามารถซ่อนเงาด้วยคอนเทนเนอร์อื่น เช่นหากมี DIV ด้านบนและด้านล่าง DIV ด้วยเงาคุณสามารถใช้position: relative; z-index: 1;กับ DIV ที่อยู่โดยรอบ

สำหรับแนวนอนเท่านั้นคุณสามารถหลอกกล่องเงาโดยใช้โอเวอร์โฟลว์ใน div parent:

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

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

ความคิดอื่นอาจสร้างองค์ประกอบหลอกเลือนมืดในที่สุดด้วยความโปร่งใสในการเลียนแบบเงา ทำให้มีความสูงน้อยลงเล็กน้อยและกว้างมากขึ้น

คุณสามารถใช้ 1 div ภายในเพื่อ "ลบ" เงา:

.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;
}

คุณสามารถเล่นกับ "height:%;" และ "ความกว้าง:%;" เพื่อลบเงาที่คุณต้องการ

ไม่ว่าด้วยเหตุผลใดคำตอบที่ให้ไว้ที่นี่จะไม่ได้ผลในกรณีของฉัน ดังนั้นฉันจึงมีความคิดสร้างสรรค์ นี่เป็นทางออกใหม่สำหรับทุกท่านที่ใช้ในสถานที่ของlinear-gradient()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>

แม้ว่าฉันจะไม่ได้มองหาเหตุผลก็ตาม แต่นี่ไม่ใช่ "กล่อง" คุณ (เรา) กำลังพยายามก่อตัวขึ้นดังนั้นฉันคิดว่าอาจพูดได้ว่าbox-shadowมันไม่สมเหตุสมผลเลยที่จะเริ่มต้น

ฉันพยายามคัดลอก bootstrap shadow-sm ทางด้านขวานี่คือรหัสของฉัน:

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