Question

我在下面使用我的CSS页面。他在四个侧面上应用了盒形阴影。

我希望仅将其应用于右侧，底部和左侧。

如何仅在3面应用盒形阴影？

-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
-ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
box-shadow: 0 0 10px rgba(0,0,0,0.22);

Answer 1

您始终可以执行以下操作：

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

<div class="shadow-box">Box with shadows</div>

Answer 2

box-shadow仅支持X和Y偏移，但是您可以通过为偏移提供适当的值来实现3个方向的box-shadow。

提示： 在chrome中，通过inspect元素，您可以轻松获取确切的值并在使用前进行预览。

请参考下面的代码段。

#boxShadow {
    display: block;
    margin: auto;
    height: 300px;
    width: 300px;
    background: #cdcdcd;
    box-shadow: 0px 5px 8px 0px #3fab83;
}

<br><div id="boxShadow">
</div>

如何只在三个侧面应用盒阴影？

2 个答案: