CSS盒阴影在一个div的三面？

我想在div的三面都有box-shadow（顶部除外）。我怎么能这样做？CSS盒阴影在一个div的三面？

2012-01-05 user1117313

似乎是重复的http://stackoverflow.com/questions/1429605/creating-a-css3-box-shadow-on-all-sides-but-one – jcuenod 2012-01-05 07:13:29

这是一个骗局，但这个有一个我认为更好的答案。他们可以合并？ – 2013-05-31 19:52:27

这是你的JS Fiddle，它只使用一个单独的工作。

#shadowBox { 
    background-color: #ddd; 
    margin: 0px auto; 
    padding: 10px; 
    width: 220px; 
    box-shadow: 0px 8px 10px gray, 
     -10px 8px 15px gray, 10px 8px 15px gray; 
}

您在底部，左下角和右下角设置阴影。有了柔和的阴影，它有点棘手，但它是可行的。它只是需要一些猜测来减少中间阴影的模糊半径，以便它在与侧面阴影重叠时看起来无缝且不会太黑。

来源

2012-01-05 07:20:33

只能通过调整1个盒子阴影的y位置才能获得相同的效果吗？ – Vigrond 2012-01-05 07:32:18

@ Vigrond我试过了，它不会让阴影模糊从两侧掉下来。您需要添加两个角落阴影才能使边更均匀。 – 2012-01-05 07:35:37

我不认为这是正确的答案，这似乎堆叠三个单独的盒子阴影在彼此的顶部，使每个边缘比预期更加黑暗。难道没有办法给每一边添加一个影子，或者一个影子能够覆盖所有三个影子？ – jenlampton 2015-04-22 01:29:06

这是一个被@Vigrond

box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15);

来源

2015-04-22 01:35:15 jenlampton

建议如果你有一个坚实的背景颜色，那么你可以通过使用background-color和z-index组合完成这一负Y值的一个例子。诀窍是给元素box-shadow及其之前的兄弟姐妹定位，然后给以前的兄弟姐妹一个背景颜色，并将其设置为具有较高的z-index，以便它堆叠在元素的顶部，box-shadow，实际上覆盖了它的顶部阴影。

这里你可以看到一个演示：http://codepen.io/thdoan/pen/vNvpKv

如果没有前一个上兄弟一起工作，那么你也可以使用一个伪元素，如:before或:after：http://codepen.io/thdoan/pen/ojJEMj

来源

2015-11-13 09:54:01 10basetom

如果您正在寻找对于像谷歌材料设计的影子：

.shadow1 { 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
} 
.shadow2 { 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
} 
.shadow3 { 
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
} 
.shadow4 { 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
} 
.shadow5 { 
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); 
}

来源：https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10

来源

2016-05-24 09:45:48

对于具有硬角的半透明阴影（即没有模糊半径），我用这个：

.shadow-no-top { 
    position: relative; 
    box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2); 
} 
.shadow-no-top:before { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: -5px; 
    right: -5px; 
    bottom: -5px; 
    background-color: rgba(0,0,0,.2); 
}

这将使用阴影的左右两部分，并增加了：after伪内容底部阴影。这避免了阴影变暗或缺少角落的重叠。

但是，这确实需要该元素的背景是固体。

来源

2017-03-02 17:10:46 spikyjt

CSS盒阴影在一个div的三面？

回答

相关问题