How can I make an effect of fading shadow with css3?

问题

I am sure that this could be done without using of pics: https://yadi.sk/i/Mx6S3s5XdG2tJ

回答1:

Use something like this

Which uses something like:

.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;
}

回答2:

You can use this example.

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

来源：https://stackoverflow.com/questions/27381309/how-can-i-make-an-effect-of-fading-shadow-with-css3

标签

css3

gradient