html - 如何给盒子的一部分上色

Question

我试图显示红色和橙色框的左侧 10%，并使背景的其余部分透明(或白色!)。这可能吗？有的话请告诉我怎么做!谢谢!

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

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

Answer 1

你这个:

.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 100%);
} 

<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 100%);
} 

  <div class="box">
    contents
  <div>

更新:
根据您的评论，替换 background: linear-gradient(90deg, red 0%, orange 10%, white 10%, white 100%);和 background: linear-gradient(90deg, red 0%, orange 100%);