如何让不同元素仅左右两侧的box-shadow无缝显示

Hey there! I totally get the frustration—those common left/right box-shadow hacks work great for single elements, but when you stack multiple .row components, they start acting up (like the wonky overlap or uneven shadows you saw in your screenshots). Let’s break down why your current approaches are failing and fix them with reliable solutions.

Why Your Current Code Isn’t Working #

• First approach: You’re using white box-shadow values to "cover up" the top/bottom shadows of your row. This works for a single element, but when rows are stacked close together, that white top/bottom shadow covers the adjacent row’s shadow, creating gaps or unevenness.
• Second approach: The shadow parameters (-8px 0 8px -8px black vs 10px -1px 8px -8px black) are inconsistent, leading to asymmetric, off-center shadows across your rows.

Reliable Solutions #

1. Use Pseudo-Elements (Best for Compatibility & Flexibility) #

This method creates separate shadow elements for the left and right sides of each row, so they never interfere with other rows—even if they’re stacked tightly.

.row {
  height: 300px;
  width: 300px;
  margin: 10px auto; /* Optional spacing, adjust as needed */
  position: relative;
  background: #fff; /* Ensure row background is solid to hide pseudo-element overlap */
}

/* Left shadow */
.row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  width: 12px;
  box-shadow: 0 0 30px -4px rgba(0, 0, 0, 0.3);
  z-index: -1; /* Place shadow behind the row */
}

/* Right shadow */
.row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -12px;
  width: 12px;
  box-shadow: 0 0 30px -4px rgba(0, 0, 0, 0.3);
  z-index: -1;
}

<div class="row"></div>
<div class="row"></div>
<div class="row"></div>

Each row gets its own independent left/right shadows, no overlaps or gaps—works with any background color too, since we’re not relying on color-matched "covers".

2. Use CSS filter: drop-shadow() (Modern Browser Friendly) #

If you don’t need to support older browsers (like IE), drop-shadow is a cleaner option. Unlike box-shadow, it only casts shadows based on the element’s actual shape, so it won’t add top/bottom shadows at all.

.row {
  height: 300px;
  width: 300px;
  margin: 10px auto;
  background: #fff;
  filter: drop-shadow(12px 0 30px -4px rgba(0,0,0,0.3)) drop-shadow(-12px 0 30px -4px rgba(0,0,0,0.3));
}

This is super concise and avoids any messy workarounds—perfect for modern projects.

3. Quick Fix for Your Original Approach (Less Ideal) #

If you really want to stick with your initial box-shadow hack, you can add vertical margin to each row to prevent the white cover shadows from overlapping adjacent rows:

.row {
  height: 300px;
  width: 300px;
  margin: 20px auto; /* Add enough top/bottom margin to avoid overlap */
  box-shadow: 0 -20px 0px 0px white, 0 20px 0px 0px white, 12px 0 30px -4px rgba(0, 0, 0, 0.3), -12px 0 30px -4px rgba(0, 0, 0, 0.3);
}

Note: This only works if your background is solid white—if you change your background color later, you’ll have to update the shadow colors too.

Final Notes #

Either the pseudo-element or drop-shadow method will give you consistent, clean left/right shadows across all your rows. The pseudo-element approach is more flexible for complex layouts, while drop-shadow is great for quick, modern implementations.

内容的提问来源于stack exchange，提问作者Richie Schuurman