不对称的CSS阴影

Question

如何创建像这样的阴影？ 只在底部角落和渐变。

- Ammar

---

Use image for that - Justinas

一个简单的选择是为阴影设置单独的div，并根据父容器进行绝对定位。 - trainoasis

@trainoasis 但它不是矩形阴影，更像是“泪滴”阴影线。 - Justinas

我可以在这里看到它链接，但我无法提取代码。 - Ammar

他正在使用以下图片：http://static.parastorage.com/services/skins/2.995.7/images/wysiwyg/core/themes/base/liftedshadow_medium.png - trainoasis

Answer 1

请按照以下方式使用您的CSS。

HTML

<div class="box mybox">
    <h3>My Box</h3>
</div>

CSS

.box h3{
 text-align:center;
 position:relative;
 top:80px;
}
.box {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}

/*==================================================
 * MyBox
 * ===============================================*/
.MyBox
{
  position: relative;
}
.MyBox:before, .MyBox:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.MyBox:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

<div class="box MyBox">
 <h3>MyBox</h3>
</div>

- Usman

---

不错，你可以考虑使用 rgba() 来代替纯色阴影，这样如果有图像、背景颜色或文本在其下方，它就会具有透明度，类似于 rgba(0,0,0, 0.7)。 - Mi-Creativity

可以的，我们可以像你提到的那样使用 rgba(0,0,0,0.7)。感谢 @Mi-Creativity 指出。 - Usman

Answer 2

试着看这个。似乎是你在搜索的内容。

http://codepen.io/jcorpus/pen/xbExKL

这里有阴影的例子，正是你所寻找的。

HTML

<div class="wrap">
  <div class="box box1 shadow1">
    <h3>Shadow 1</h3>
  </div>
</div> 

CSS

    body{
  background:#E6EEF6;
}
.wrap{
  margin-left:20px;
}
.box{
  width:40%;
  height:200px;
  float:left;
  background-color:white; 
  margin:25px 15px;
  border-radius:5px;
}
.box h3{
  font-family: 'Didact Gothic', sans-serif;
  font-weight:normal;
  text-align:center;
  padding-top:60px;
  color:#fff;
}
.box1{
  background-color: #EBA39E;
}
.shadow1{
  position:relative;
}
.shadow1{
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
/*****************************************************************dashed border
****************************************************************/
.shadow1 h3{
  width:87%;
  height:100px;
  margin-left:6%;
  border:2px dashed #F7EEEE;
  border-radius:5px;
}

.shadow1:before, .shadow1:after{
  position:absolute;
  content:"";
  bottom:12px;left:15px;top:80%;
  width:45%;
  background:#9B7468;
  z-index:-1;
  -webkit-box-shadow: 0 20px 15px #9B7468;
  -moz-box-shadow: 0 20px 15px #9B7468;
  box-shadow: 0 20px 15px #9B7468;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.shadow1:after{
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  transform: rotate(6deg);
  right: 15px;left: auto;
}

- LorenzoBerti

Answer 3

<div class="box effect3">
<h3>Effect 2</h3>
</div>

    .box h3{
  text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

.effect3
{
  position: relative;
}
.effect3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

- NK Chaudhary