Question

这是我的工作示例link。我想让淡入淡出一点点，以便它不会如此靠近右边的末端。有什么建议吗？

.order-page-left {
  width: 275px;
  background: white;
}
.orders-list .item {
  display: block;
  border-bottom: 1px solid #e0e0e0;
  color: #181818;
  outline: 0;
  position: relative;
}
.orders-list .item .inner {
  padding: 7px 0 10px;
}
.orders-list .item .inner:before {
  content: "";
  height: 100%;
  width: 30px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, white));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
}
.orders-list .item .detail {
  float: left;
  padding: 0 0 0 15px;
  width: 50px;
}
.orders-list .item .detail .smaller {
  font-size: 12px;
  color: #808080;
}
.orders-list .item .name {
  margin-left: 65px;
}
.orders-list .item .name .info {
  font-size: 12px;
  color: #808080;
}

<div class="order-page-left">
    <div class="orders-list"> <a id="documentLink0" href="/service/sales/documents/order/quickView.do?envId=406519&amp;isDraft=false&amp;isNewDoc=true&amp;docStatus=" class="item highligh">


      <!-- onClick="getDocumentDetails(this, event);" -->
      <div class="inner cfx">
        <div class="detail">

          <b>
							
                               <span class="showDate">
                                    <span class="date" style="display: none;">03.07
                                    </span>
                                    <span class="exp_date">
                                    </span>
                                    <span class="docDate" style="display: inline;">11.05
                                    </span>
                               </span>
							
								</b>

          <div class="smaller">
            <span class="showDate">
                                    <span class="date" style="display: none;">11:25
                                    </span>
            <span class="exp_date">
                                    </span>
            <span class="docDate" style="display: inline;">09:07
                                    </span>
            </span>
          </div>
        </div>
        <div class="name">
          <b>AUTO EDIBUYER1</b>



          <div class="info">
            142.81 JMETER_20150703112433000000120:1:L
          </div>
        </div>
      </div>
    </a>

    </div>
</div>

Answer 1

据我所知，您需要将伪元素的宽度更改为60px。您还需要将颜色停止更改为50％。这是更新的小提琴：http://fiddle.jshell.net/nt2z1chv/1/

Answer 2

您可以通过更改渐变中的百分比值来调整渐变。

background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);

将0％更改为更高的值会缩短它。或者，只需更改元素的宽度。

淡化背景帮助 - CSS

2 个答案: