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之間的差異作了小提琴。 請檢查此小提琴鏈接 。

上面是css漸變，下面是畫布1。 如您所見，畫布的createLinearGradient可以按預期工作，但是在CSS上， same-color-line （上圖中的黃色線）與漸變的方向不垂直，而是看起來像元素的另一個diagonal 。 有什么原因為什么要在CSS中顯示？

Answer 1

這是設計使然。 您可以在此處了解更多信息： https : //drafts.c​​sswg.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 。 如果將其設置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>