html - 从插入框阴影中删除边框半径

Question

我正在尝试创建一个带有曲线边框的简单进度条，为了填充进度条，我使用了插入框阴影技巧。

但是我遇到了一个我无法解决的问题。你们能帮帮我吗？

输出: Screenshot

期望的输出:Screenshot

.skillset {
    display: inline-block;
    width: 60%;
}

.skill p {
    float: left;
    margin-top: 5px;
}

.bar {
    width: 85%;
    float: right;
    height: 30px;
    border-radius: 20px;
    background: #ddd;
    display: inline-block;
    box-shadow: inset 600px 0 0 0 #2ecc71;
}

.clear {
    clear: both;
}

<div class="skillset">
 <div class="skill">
  <p>HTML & CSS</p> <div class="bar"></div>
  <div class="clear"></div>
 </div>
</div>

请告诉我可以对我的代码进行哪些更改以获得所需的输出。

Answer 1

你可以简单地使用一个伪元素，通过调整元素的宽度轻松控制进度:

.skillset {
  display: inline-block;
  width: 60%;
}

.skill p {
  float: left;
  margin-top: 5px;
}

.bar {
  width: 85%;
  float: right;
  height: 30px;
  border-radius: 20px;
  display: inline-block;
  background-color: #ddd;
  position: relative;
}

.bar:before {
  content: "";
  position: absolute;
  z-index: 2;
  background: green;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  border-radius: 20px;
}

.clear {
  clear: both;
}

<div class="skillset">
  <div class="skill">
    <p>HTML & CSS</p>
    <div class="bar"></div>
    <div class="clear"></div>
  </div>
</div>

这是另一个使用线性/径向渐变的想法:

.skillset {
    display: inline-block;
    width: 60%;
}

.skill p {
    float: left;
    margin-top: 5px;
}

.bar {
    width: 85%;
    float: right;
    height: 30px;
    border-radius: 20px;
    display: inline-block;
    background:linear-gradient(to right,green 50%,transparent 0%),
    radial-gradient(circle at center,green 68%,transparent 70%) 50% 0/30px 30px no-repeat;    
    background-color: #ddd;
}

.clear {
    clear: both;
}

<div class="skillset">
 <div class="skill">
  <p>HTML & CSS</p> <div class="bar"></div>
  <div class="clear"></div>
 </div>
</div>

如果你想使用 box-shadow，你可能只是想换个方式，像这样使用它:

.skillset {
  display: inline-block;
  width: 60%;
}

.skill p {
  float: left;
  margin-top: 5px;
}

.bar {
  width: 85%;
  float: right;
  height: 30px;
  border-radius: 20px;
  display: inline-block;
  box-shadow: inset -100px 0 0 0 #ccc;
  background: #2ecc71;
}

.clear {
  clear: both;
}

<div class="skillset">
  <div class="skill">
    <p>HTML & CSS</p>
    <div class="bar"></div>
    <div class="clear"></div>
  </div>
</div>