html – CSS – 线性渐变的清晰边界

2023年1月16日 339次阅读

我使用线性渐变来生成具有梯形边框的div的两个部分.我无法在两种颜色之间获得清晰的边界,我得到一个非常狭窄的渐变区域 – 我已经能够减少它,但我无法完全减少它.

这是我用过的代码：

.buyers-div {
  width: 100%;
  height: 500px;
  background: -moz-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%);
  /* ff3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #FFFFFF), color-stop(49%, #FFFFFF), color-stop(50%, #197f88), color-stop(100%, #197f88));
  /* safari4+,chrome */
  background: -webkit-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%);
  /* safari5.1+,chrome10+ */
  background: -o-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%);
  /* opera 11.10+ */
  background: -ms-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%);
  /* ie10+ */
  background: linear-gradient(113deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%);
  /* w3c */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#197f88', GradientType=1);
  /* ie6-9 */
}
<div class="buyers-div"></div>

最佳答案 您对渐变的声明会在#ffffffand#197f88之间产生1％的步长.改变这个

background: linear-gradient(113deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%);

至

background: linear-gradient(113deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%);

你得到了清晰的边界(但角度相当不理想)：

.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 */
}
<div class="buyers-div"></div>

在A Collection of Separator Styles处,您可以看到许多不同且清晰的分隔符样式.愿它对你的方法有所帮助.

点赞