HTML css 线性渐变未按预期工作

Question

我只是在 css 中使用线性渐变，顺便说一句，生成的渐变效果与设计不同。我从来没有在任何 Android、iOS、React Native 或 HTML5 画布上遇到过这个问题，但只是在 css 上。

.gradient {
  background-image: linear-gradient(to right top, red, blue);
}

为了展示 css 的 linear-gradient 和 canvas 的 create createLinearGradient 之间的差异，我做了一个小提琴。 请检查此fiddle link。

上面是css渐变，下面是canvas之一。 如您所见，画布的createLinearGradient 工作正常，但在css 上same-color-line（上图中的黄线）不垂直于渐变的方向，而是看起来像元素的另一个diagonal。 有什么理由为什么它在 css 中？

Answer 1

这是设计使然。您可以在此处阅读更多信息：https://drafts.csswg.org/css-images-3/#linear-gradients。

如果参数指定了盒子的一个角，例如to top left，渐变线必须倾斜，使其指向与指定角相同的象限，并且垂直于与渐变框的两个相邻角相交的线。这会导致 50% 处的色标与相邻的两个角相交。

基本上，当使用这样的关键字时，你会得到一种从角落开始的拉伸梯度，你会失去对角线的垂直特征。

.child {
  position:relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  background-image: linear-gradient(to top right, red 50%, blue 0);
}
.child.alt {
  width:200px;
}

.child:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to top left,transparent calc(50% - 5px),green,transparent calc(50% + 5px) );
}

this one is good because it's a square
<div class="child"></div>
but not this one
<div class="child alt"></div>

如果您想获得第二个输出，您需要使用显式角度并找到使渐变线与对角线相同的角度，为此您需要考虑等于arctang(width/height)的角度

在您的情况下，它将是 arctang(300/75) = arctang(4) = 75.69deg。由于您使用的是 JS，因此您可以轻松进行此计算。

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

var grd = ctx.createLinearGradient(0, 75, 300, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "blue");

ctx.fillStyle = grd;
ctx.fillRect(0, 0, 300, 75);

.parent {
  width: 300px;
  height: 300px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  background-color: #6EE2F5;
}
.child {
  width: 300px;
  height: 75px;
  border: 1px solid red;
  background-image: linear-gradient(75.69deg, red, blue);
}
#canvas {
  width: 300px;
  height: 75px;
  border: 1px solid green;
}

<div class="parent">
<div class="child"></div>
<canvas id="canvas" width=300 height=75/>
</div>

这是一个交互式演示

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

function update() {
 var H = $('[name=h]').val();
 var W = $('[name=w]').val();
 $('.child').css('height',H);
 $('.child').css('width',W);
 $('canvas').attr("width", W);
 $('canvas').attr("height", H);
 var angle = Math.atan(W/H) 
 $('.child').css("--a", (angle * 180 / Math.PI)+"deg");

 var grd = ctx.createLinearGradient(0, H, W, 0);
 grd.addColorStop(0.4, "red");
 grd.addColorStop(0.6, "blue"); 
 ctx.fillStyle = grd;
 ctx.fillRect(0, 0, W, H);

}
$('input').change(update);
update();

.child {
  border: 1px solid;
  background-image: linear-gradient(var(--a), red 40%, blue 60%);
}
#canvas {
  border: 1px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
W: <input type="number" name="w" step="1" value="300">
H: <input type="number" name="h" step="1" value="75">
<div class="child"></div>
<canvas id="canvas" width=300 height=75/>

Answer 2

只需将to right top 替换为to right。如果将其设置为to right top，则linear-gradient() 具有一定程度的应用，因为它以左下角为起点，向上延伸到矩形的右上角。

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

var grd = ctx.createLinearGradient(0, 75, 300, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "blue");

ctx.fillStyle = grd;
ctx.fillRect(0, 0, 300, 75);

.parent {
  width: 300px;
  height: 300px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  background-color: #6EE2F5;
}

.child {
  width: 300px;
  height: 75px;
  border: 1px solid red;
  background-image: linear-gradient(to right, red, blue);
}

#canvas {
  width: 300px;
  height: 75px;
  border: 1px solid green;
}

<div class="parent">
  <div class="child"></div>
  <canvas id="canvas" width=300 height=75/>
</div>