从插入框阴影

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

您可以简单地使用伪元素，并通过调整元素的宽度轻松控制进度：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果你想使用盒子阴影，你可能会有不同的想法，并像这样使用它：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;