我想在一个div的三个边(除了顶部)有阴影效果。我该如何实现?
```
```
我想在一个div的三个边(除了顶部)有阴影效果。我该如何实现?
```我想在一个div的三个边(除了顶部)有阴影效果。我该如何实现?
```这里有一个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;
}
你设置了底部、左下角和右下角的阴影。对于软阴影来说,这有点棘手,但是它是可行的。只需要稍微猜一下中间阴影的模糊半径,使其看起来无缝并且当它与侧面阴影重叠时不会太暗。
.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);
}
box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15);
我喜欢@Chris C的回答,但我认为我们不需要第一行代码。这样更短,并且具有相同的效果:
box-shadow: -10px 8px 15px lightgray, /*left and bottom*/
10px 8px 15px lightgray; /*right and bottom*/
#note{
position: absolute;
top: 20px; left: 30px;
width:100px; height: 100px;
background-color: #eee;
box-shadow: -10px 8px 15px lightgray,
10px 8px 15px lightgray;
}
<div id="note"></div>
如果您有一个坚实的背景颜色,那么您可以通过使用background-color
和z-index
的组合来实现这一点。诀窍是给具有box-shadow
的元素及其前一个兄弟姿态,然后给前一个兄弟一个背景颜色,并将其设置为具有更高的z-index
,以便它堆叠在具有box-shadow
的元素上方,从而覆盖其顶部阴影。
您可以在此处查看演示:http://codepen.io/thdoan/pen/vNvpKv
如果没有立即前一个兄弟可用,则还可以使用伪元素,例如:before
或:after
:http://codepen.io/thdoan/pen/ojJEMj
对于带有硬边的半透明阴影(即没有模糊半径),我使用了以下代码:
.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);
}