html - 使用 CSS 的 HTML 元素的左下角均匀阴影

Question

附加单个视觉阴影

在这个 HTML 片段中使用较少的 CODE#1，...

<div class="shadowBottom"  style="width: 200px;" >
   ... stuff here ...
</div>

可以轻松地将阴影附加到 HTML 页面的 DIV 部分：

less代码在元素的左下角和右下角下方添加 box-shadows 并稍微旋转它们。使用z-index=-1阴影获得目标元素的后面。因此，只有一些阴影在目标元素下方可见。瞧！

当然，目标元素需要有一个不透明的背景才能在z-index=-1处不显示框阴影元素。

附加两个视觉阴影

使用非常相似的代码，左下角/左角的阴影是可能的。

要结合这两种阴影效果，需要将两个DIVs环绕实际内容[将两个类应用于同一个 DIV 不起作用]：

<div class="shadowLeft" style="width: 200px;">
   <div class="shadowBottom"  style="width: 200px;" >
      ... stuff here ...
   </div>
</div>

像这样渲染：

实际上，这不是我想要实现的，因为两个阴影效果之间存在差距。

问题

我很高兴看到如何填补空缺并在拐角处生成均匀的阴影。像这样的东西：

代码#1 [更少]

.shadowBottom {

    background-color: #FFFFFF;  
    width: 100%;
    position: relative;

}

@shadowRotation: 6deg;
@horizontalOffset: 0px;
@alpha: 0.2;

.shadowBottom:before {

    content: '';

    position: absolute;
    bottom: 10px;
    left: @horizontalOffset;
    z-index: -1;
    width: 100px;
    height: 20px;

    -webkit-box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );
    -moz-box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );
    box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );

    -webkit-transform: rotate( -@shadowRotation );
    -moz-transform: rotate( -@shadowRotation );
    -o-transform: rotate( -@shadowRotation );
    -ms-transform: rotate( -@shadowRotation );
    transform: rotate( -@shadowRotation );

}

.shadowBottom:after {

    content: '';

    position: absolute;
    bottom: 10px;
    right: @horizontalOffset;
    z-index: -1;
    width: 100px;
    height: 20px;

    -webkit-box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );
    -moz-box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );
    box-shadow: 0 10px 5px rgba( 0, 0, 0, @alpha );

    -webkit-transform: rotate( @shadowRotation );
    -moz-transform: rotate( @shadowRotation );
    -o-transform: rotate( @shadowRotation );
    -ms-transform: rotate( @shadowRotation );
    transform: rotate( @shadowRotation );

}

Answer 1

编辑：我最接近的方法是使用skew制作类似菱形的图形：

.shadowBottom{
  position:relative;
  box-shadow: 0 0 6px rgba( 0, 0, 0, 0.2);    
}

.shadowBottom::before, .shadowBottom::after{ 
  content: '';
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: -1;
  width: 50%;
  height: 90%;
  box-shadow: 0px 10px 30px rgba( 0, 0, 0, 0.4);   
  transform: skewX(-10deg) rotate(-4deg); 
               /* ^ skew value should be adjusted to match box w/h */
}

.shadowBottom::after{
  transform: skewX(10deg) rotate(4deg);  
               /* ^ same here */
  left: auto;
  right: 10px;
}

演示