css - 使用 CSS 仅隐藏 Div 的底部阴影

标签 css

我想在除底部以外的每一侧都显示盒子阴影。

这是我正在使用的 CSS。

box-shadow: 0 0 12px 4px #ddd;

如何去除底部阴影?

最佳答案

你不能只改变一个轴上的阴影尺寸(即你不能只减少阴影的高度)。一种技巧是将阴影添加到伪元素 并降低该元素的高度。

.shadow {
  margin:20px;
  width:400px;
  height:200px;
  background:red;
  position:relative;
  }
/* Pseudo element for adding shadow */
.shadow:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:16px;
  box-shadow: 0 0 12px 4px #999;
  z-index:-1;
}
  
<div class="shadow"></div>

关于css - 使用 CSS 仅隐藏 Div 的底部阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41077054/

相关文章:

java - 为什么我不能修改 ListView 中的列表单元格 css?

html - 在菜单上使用滚动条时如何显示子菜单?

ios - webkit 不动画不透明度

html - CSS如何在<div>中不换行的情况下继续文本

html - CSS 高度 :100% not working on Table inside Flexbox Child

jquery - CSS3 动画 - 无限旋转高分辨率图像,框阴影脉冲发光

html - 为什么使用本地服务器时 HTML 标记的宽度更小?

html - 到外部样式表的异常链接

HTML:没有滚动条的水平滚动

html - 定位背景:url with zindex