我尝试只将盒子的10%涂成红色和橙色，并将其余的背景变成透明（或白色！）。这可能吗？如果是，请告诉我怎么做！谢谢！

<div class="box">
content
</div>

.box{
    background : linear-gradient(to right, red, orange);
    border : 1px black solid;
}

顺晟科技：

你的这个:

.box { height: 100px; width: 400px; border: 1px solid #000; background: rgb(255,0,0); background: linear-gradient(90deg, red 0%, red 5%, orange 5%, orange 10%, white 10%, white ); } <div class="box"> contents <div>

或者如果您想在10%的范围内混合这两种颜色，可以尝试以下操作:

.box { height: 100px; width: 400px; border: 1px solid #000; background: rgb(255,0,0); background: linear-gradient(90deg, red 0%, orange 10%, white 10%, white ); } <div class="box"> contents <div>

您可以使用渐变中的百分比来实现以下结果:

.box { background: linear-gradient(90deg, red 0%, orange 10%, white 10%); border: 1px black solid; } <div class="box"> content </div>

只计算它填充上面的部分 线性梯度（向右，红色5%，橙色5%，白色，白色80%）；