CSS图标故障？答案

【问题标题】：CSS icon glitch?CSS图标故障？
【发布时间】：2021-02-15 16:24:07
【问题描述】：

我目前正在尝试编写一个扬声器图标，我几乎完成了，但后来扬声器的内圈出现故障，但它在 CSSBattle 网站上工作，我现在无法修复它。每个圆圈都工作正常，但只有第一个一个以某种方式卡住了..我真的很感激一些帮助。我无法解决它所以...这是代码：

 body {
            background-color: #191919;
            width: 400px;
            height: 300px;
        }
        
        .speaker-triangle {
          margin-top: 13%;
          margin-left: 2%;
          height: 0px;
          width: 0px;
          border-top: 100px solid #191919;
          border-bottom: 100px solid #191919;
          border-left: 90px solid #191919;
          border-right: 90px solid #5DBCF9;
      }
          
        .speaker-holder {
          background-color: #5DBCF9;
          width: 60px;
          height: 50px;
          margin-top: -126px;
          margin-left: 68px;
          border-top-left-radius: 9px;
          border-bottom-left-radius: 9px;
        }
       
        .inner-circle {
          position: absolute;
          background-color: #191919;
          height: 80;
          width: 40;
          border-top-right-radius: 110px;
          border-bottom-right-radius: 110px;
          margin-top: -80px;
          margin-left: 215px;
          border: 10px solid #5DBCF9;
          border-left: #191919;
        }
        
         .middle-circle {
          position: absolute;
          background-color: #19191;
          height: 130px;
          width: 65px;
          border-top-right-radius: 110px;
          border-bottom-right-radius: 110px;
          margin-top: -104px;
          margin-left: 215px;
          border: 10px solid #5DBCF9;
          border-left: #191919;
        }
        
         .outer-circle {
          position: absolute;
          background-color: #19191;
          height: 180px;
          width: 90px;
          border-top-right-radius: 110px;
          border-bottom-right-radius: 110px;
          margin-top: -128px;
          margin-left: 215px;
          border: 10px solid #5DBCF9;
          border-left: #191919;
        }

  <div class="speaker-triangle"></div>
    <div class="speaker-holder"></div>
    <div class="inner-circle"></div>
    <div class="middle-circle"></div>
    <div class="outer-circle"></div>

【问题讨论】：

标签： html css margin

【解决方案1】：

.inner-circle的高宽后没有设置长度单位你有：

height: 80;
width: 40;

正确的是：

height: 80px;
width: 40px;

您可以使用所有浏览器都有的检查元素功能来识别此类错误。正确的完整示例是：

body {
  background-color: #191919;
  width: 400px;
  height: 300px;
}

.speaker-triangle {
  margin-top: 13%;
  margin-left: 2%;
  height: 0px;
  width: 0px;
  border-top: 100px solid #191919;
  border-bottom: 100px solid #191919;
  border-left: 90px solid #191919;
  border-right: 90px solid #5dbcf9;
}

.speaker-holder {
  background-color: #5dbcf9;
  width: 60px;
  height: 50px;
  margin-top: -126px;
  margin-left: 68px;
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
}

.inner-circle {
  position: absolute;
  background-color: #191919;
  height: 80px;
  width: 40px;
  border-top-right-radius: 110px;
  border-bottom-right-radius: 110px;
  margin-top: -80px;
  margin-left: 215px;
  border: 10px solid #5dbcf9;
  border-left: #191919;
}

.middle-circle {
  position: absolute;
  background-color: #19191;
  height: 130px;
  width: 65px;
  border-top-right-radius: 110px;
  border-bottom-right-radius: 110px;
  margin-top: -104px;
  margin-left: 215px;
  border: 10px solid #5dbcf9;
  border-left: #191919;
}

.outer-circle {
  position: absolute;
  background-color: #19191;
  height: 180px;
  width: 90px;
  border-top-right-radius: 110px;
  border-bottom-right-radius: 110px;
  margin-top: -128px;
  margin-left: 215px;
  border: 10px solid #5dbcf9;
  border-left: #191919;
}

  <div class="speaker-triangle"></div>
  <div class="speaker-holder"></div>
  <div class="inner-circle"></div>
  <div class="middle-circle"></div>
  <div class="outer-circle"></div>

【讨论】：