如何仅在 3 个边上应用 box-shadow?
How to apply box-shadow only on 3 sides?
我在下面使用我的 CSS 页面。他在 4 个边上应用了 box-shadow。
我希望它只应用于右侧、底部和左侧。
如何只在 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);
您可以随时执行以下操作:
.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>
box-shadow 仅支持 X & Y 偏移,但您可以通过为偏移提供适当的值来实现 3 个方向的 box-shadow。
提示: 在 chrome 中,通过检查元素,您可以轻松获取准确的值并在使用前进行预览。
请参考下面的代码片段。
#boxShadow {
display: block;
margin: auto;
height: 300px;
width: 300px;
background: #cdcdcd;
box-shadow: 0px 5px 8px 0px #3fab83;
}
<br><div id="boxShadow">
</div>
我在下面使用我的 CSS 页面。他在 4 个边上应用了 box-shadow。
我希望它只应用于右侧、底部和左侧。
如何只在 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);
您可以随时执行以下操作:
.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>
box-shadow 仅支持 X & Y 偏移,但您可以通过为偏移提供适当的值来实现 3 个方向的 box-shadow。
提示: 在 chrome 中,通过检查元素,您可以轻松获取准确的值并在使用前进行预览。
请参考下面的代码片段。
#boxShadow {
display: block;
margin: auto;
height: 300px;
width: 300px;
background: #cdcdcd;
box-shadow: 0px 5px 8px 0px #3fab83;
}
<br><div id="boxShadow">
</div>