Question

我想在中心只有一个圆圈而不是它周围的圆圈。我不想改变当前的代码（渐变式）。我怎么能实现它？

＆＃13;

 
 #bar {
  position: relative;
  height: 200px;
  width: 600px;
  background: linear-gradient(to left, yellow 99.9%, blue 99.9%), radial-gradient(circle at 50% 50%, yellow 50%, transparent 10%);
  background-position: 50% 100px, 50% 50%;  
  background-size:100% 15px, 100px 100px; 
  background-repeat: no-repeat, repeat-x;
}

＆＃13;

<div id="bar"></div>

＆＃13;

Answer 1

删除repeat-x

#bar {
  position: relative;
  height: 200px;
  width: 600px;
  background: linear-gradient(to left, yellow 99.9%, blue 99.9%), radial-gradient(circle at 50% 50%, yellow 50%, transparent 10%);
  background-position: 50% 100px, 50% 50%;  
  background-size:100% 15px, 100px 100px; 
  background-repeat: no-repeat;
}

<div id="bar"></div>

Answer 2

您应该删除repeat-x

 #bar {
  position: relative;
  height: 200px;
  width: 600px;
  background: #fff; //type in your color between # and ;
  background-position: 50% 100px, 50% 50%;  
  background-size:0 15px, 100px 100px; 
  background-repeat: no-repeat;
}

只需要一个圆心

2 个答案: