CSS 按钮中奇怪的黑色轮廓

如何解决CSS 按钮中奇怪的黑色轮廓

如何去除按钮下方这种奇怪的黑色轮廓。看看我的代码和它的输出。

I have this strange black outline in my button,can someone help me how to remove it.

body {
  margin: 0;
  padding: 0;
  Box-sizing: border-Box;
  background: hsl(0,0%,95%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  margin: 40px 0;
  font-size: 15px;
}

div {
  background: white;
  width: 85%;
  height: 30%;
}

.sedans {
  background: hsl(31,77%,52%);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  Box-sizing: border-Box;
  padding: 2.9em;
  max-width: 450px;
}

h2 {
  font-family: "Big Shoulders display";
  color: hsl(0,95%);
  font-size: 2em;
}

p {
  font-family: "Lexend Deca";
  color: hsla(0,100%,0.75);
  line-height: 1.5em;
  padding-bottom: 2em;
}

button {
  color: hsl(31,52%);
  padding: 1em 2.2em;
  background: hsl(0,95%);
  border-radius: 2em;
  font-family: "Lexend Deca";
}

div.suvs {
  background: hsl(184,22%);
  Box-sizing: border-Box;
  padding: 2.9em;
  max-width: 450px;
}

.suvs button {
  color: hsl(184,22%);
}

div.luxury {
  background: hsl(179,13%);
  Box-sizing: border-Box;
  padding: 2.9em;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  max-width: 450px;
}

.luxury button {
  color: hsl(179,13%);
}

.sedans button:hover {
  background: hsl(31,52%);
  color: hsl(0,95%);
}

.suvs button:hover {
  background: hsl(184,22%);
  color: hsl(0,95%);
}

.luxury button:hover {
  background: hsl(179,13%);
  color: hsl(0,95%);
}

@media only screen and (min-width: 1440px) {
  body {
    flex-direction: row;
    margin: auto 100px;

    .sedans {
      border-top-right-radius: 0;
      border-bottom-left-radius: 10px;
      border-top-left-radius: 10px;
      max-width: 310px;
      height: 500px;
    }

    .suvs {
      max-width: 310px;
      height: 500px;
    }

    .luxury {
      border-top-right-radius: 10px;
      border-bottom-left-radius: 0;
      max-width: 310px;
      height: 500px;
    }
    p {
      line-height: 1.7em;
    }
    h2 {
      font-size: 2.5em;
    }

    button {
      margin-top: 2em;
    }
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Gerson-web001</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+display:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">

</head>
<body>
    
    <div class="sedans">
        <img src="images/icon-sedans.svg" alt="">
        <h2>SEDANS</h2>
        <p>Choose a sedan for its affordabiity and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
        <button>Learn More</button>
    </div>

    <div class="suvs">
        <img src="images/icon-suvs.svg" alt="">
        <h2>SUVS</h2>
        <p>Take an SUV for its spacIoUs interior,power,and versatility. Perfect for your next family vacation and off-road adventures</p>
        <button>Learn More</button>
    </div>

    <div class="luxury">
        <img src="images/icon-luxury.svg" alt="">
        <h2>LUXURY</h2>
        <p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.</p>
        <button>Learn More</button>
    </div>

</body>
</html>

解决方法

要删除按钮轮廓，您只需设置 border: 0 和 outline: 0

button {
  color: hsl(31,77%,52%);
  padding: 1em 2.2em;
  background: hsl(0,0%,100%);
  border-radius: 2em;
  font-family: "Lexend Deca";
  /* Add this to your button tag */
  outline: none; /* Optional */
  border: 0;
}