如何使用CSS3产生阴影淡入的效果? [英] How can I make an effect of fading shadow with css3?

问题描述

我确信无需使用图片即可完成此操作: https://yadi.sk/i/Mx6S3s5XdG2tJ

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

推荐答案

使用类似此

使用类似的东西

.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产生阴影淡入的效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！