PROSAGA码农传奇-数据仓库-CSS - 线性渐变的清晰边界

CSS - 线性渐变的清晰边界

作者: 遇见你
发布时间: 2025-02-04 06:19:29 (6天前)
转自：

<div class =“post-text”itemprop =“text”>
  <P>
    您对渐变的声明产生了1％的步长
     <code>
      #ffffff
    </code>
    和
     <code>
      #197f88
    </code>
    。改变这个
  </p>
   <pre>
    <code>
      background: linear-gradient(113deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%);

</code>
  </pre>
  <P>
    至
  </p>
   <pre>
    <code>
      background: linear-gradient(113deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%);

</code>
  </pre>
  <P>
    你得到了清晰的边界（但角度相当不理想）：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          .buyers-div {
  width: 100%;
  height: 500px;
  background: -moz-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%);
  /* ff3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #FFFFFF), color-stop(50%, #FFFFFF), color-stop(50%, #197f88), color-stop(100%, #197f88));
  /* safari4+,chrome */
  background: -webkit-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%);
  /* safari5.1+,chrome10+ */
  background: -o-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%);
  /* opera 11.10+ */
  background: -ms-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%);
  /* ie10+ */
  background: linear-gradient(113deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%);
  /* w3c */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#197f88', GradientType=1);
  /* ie6-9 */
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <div class="buyers-div"></div>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    上
    <a href="https://tympanus.net/Development/SectionSeparators/" rel="nofollow noreferrer">
      分隔符样式的集合
    </A>
     在那里你可以看到许多不同的和锐利的分隔符样式愿它对你的方法有所帮助。
  </p>
</DIV>