Question

我确信这可以在不使用图片的情况下完成： https://yadi.sk/i/Mx6S3s5XdG2tJ

Answer 1

您可以使用此示例。

HTML：

<div class="box">
    <p>Put as much HTML in here as you like.</p>
</div>

CSS：

.box {
    position: relative;
    margin: 0 auto 80px;
    padding: 70px 0 40px;
    max-width: 840px;
    text-align: center;
    background: #fff;
}

.box:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
       -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    z-index: -1;
}

<强> DEMO

Answer 2

使用this

之类的内容

使用类似的东西：

.knockout-top-to-bottom {
  position: relative; 
}
.knockout-top-to-bottom:before, .knockout-top-to-bottom:after {
  content: "";
  position: absolute;
}
.knockout-top-to-bottom:before {
  top: -3px;
  left: -3px;
  bottom: 0;
  right: -3px;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image: -moz-linear-gradient(#000, transparent);
  background-image: -o-linear-gradient(#000, transparent);
  z-index: -2;
}
.knockout-top-to-bottom:after {
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #a4b9ff;
}

如何使用css3实现淡化阴影效果？

2 个答案: