使用CSS或CSS3在Span或Div上添加阴影

Question

我知道我可以在div上覆盖透明图像来实现这一点，但问题是，这是否只能使用css3？ 它实际上是一个黄色的进度条，上面有轻微的浅色或渐变。

Answer 1

您可以使用bootstrap

创建类似的进度条

DEMO：https://jsfiddle.net/2Lzo9vfc/190/

<强> HTML

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

<强> CSS

.progress-bar {
    background: rgba(237,220,109,1);
    background: -moz-linear-gradient(left, rgba(237,220,109,1) 0%, rgba(237,220,109,1) 31%, rgba(255,245,180,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(237,220,109,1)), color-stop(31%, rgba(237,220,109,1)), color-stop(100%, rgba(255,245,180,1)));
    background: -webkit-linear-gradient(left, rgba(237,220,109,1) 0%, rgba(237,220,109,1) 31%, rgba(255,245,180,1) 100%);
    background: -o-linear-gradient(left, rgba(237,220,109,1) 0%, rgba(237,220,109,1) 31%, rgba(255,245,180,1) 100%);
    background: -ms-linear-gradient(left, rgba(237,220,109,1) 0%, rgba(237,220,109,1) 31%, rgba(255,245,180,1) 100%);
    background: linear-gradient(to right, rgba(237,220,109,1) 0%, rgba(237,220,109,1) 31%, rgba(255,245,180,1) 100%);
}

.progress {
    background: #808080;
}

Answer 2

哦，明白了，我使用了以下代码。

.bar :after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
    z-index: 1;
    background-size: 220% 102px;
    animation: move 2s linear infinite;
    overflow: hidden;
}