从插入框阴影中删除边框半径答案

【问题标题】：Removing border radius from inset box shadow从插入框阴影中删除边框半径
【发布时间】：2018-02-04 16:24:36
【问题描述】：

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

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

所需输出：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>

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

【问题讨论】：

您是否遗漏了一些代码？我没有看到覆盖绿色条的条。
不，这是完整的代码。实际上，sn-p 的窗口很小，由于无响应，它覆盖了整个栏，但是如果您在新窗口中打开它，您将能够发现错误！

标签： html css progress-bar box-shadow

【解决方案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>

【讨论】：

当@Temani，你总是打败我！哈哈。祝你好运！
@Temani，现在如何更改进度条的宽度，因为我需要为每个技能保留不同的百分比？
@SayamK 您需要调整第一个线性渐变的百分比，然后调整第二个线性渐变的位置 [两者的 50%]，顺便说一下我添加了另一种方法:)
是的，我看到了第二个！我更喜欢第二种方法，因为第一种方法对我来说有点复杂：P
@SayamK 当然，我会颠倒顺序，但了解新事物总是好的 :)