我怎样才能显示边框？它没有显示

Question

我遇到了一个问题，我的网格元素没有显示边框？这是我的代码：

.offers {
  display: grid;
  grid-template-columns: 32% 33% 32%;
  grid-column-gap: 20px;
}

.offers div {
  border-width: 10px;
  border-color: black;
  background-color: white;
}

.abouttext {
  color: black;
  font-size: 100px;
  text-align: right;
  margin: 0px;
  margin-right: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
}

<div class="offers">
  <div>
    <h3>Access To A Massive Library Of Education</h3>
    <p>With Summit you get an unlimited selection of indepth, engaging content for free.</p>
  </div>
  <div>
    <h3>No Extra Payed Upgrades</h3>
    <p>Summit says no to any extra add-ons or premium upgrades with pay walls. Everything is all free and hassle free.</p>
  </div>
  <div>
    <h3>We Are Advert Free</h3>
    <p>We all hate adverts, especially when we are engaged in content. Summit is happy to inform you that we are advert free!</p>
  </div>
</div>

感谢阅读本文，我知道它冗长乏味，所以如果你想要我的 repl 代码，就在这里（没有编辑权限）：https://replit.com/join/mrmggxewvv-tahaparacha1

再次感谢！

Answer 1

您还没有指定边框样式。

尝试用这个替换您的边框样式：

border: 10px solid #000;

见下文：

.offers {
  display: grid;
  grid-template-columns: 32% 33% 32%;
  grid-column-gap: 20px;
}

.offers div {
  border: 10px solid #000;
  background-color: white;
}

.abouttext {
  color: black;
  font-size: 100px;
  text-align: right;
  margin: 0px;
  margin-right: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
}

<div class="offers">
  <div>
    <h3>Access To A Massive Library Of Education</h3>
    <p>With Summit you get an unlimited selection of indepth, engaging content for free.</p>
  </div>
  <div>
    <h3>No Extra Payed Upgrades</h3>
    <p>Summit says no to any extra add-ons or premium upgrades with pay walls. Everything is all free and hassle free.</p>
  </div>
  <div>
    <h3>We Are Advert Free</h3>
    <p>We all hate adverts, especially when we are engaged in content. Summit is happy to inform you that we are advert free!</p>
  </div>
</div>

Answer 2

您没有设置边框样式。例如只写border-style:solid。

Answer 3

你可以简单地使用 shorthand border: 3px solid red; 而不是 border-width: 10px; border-color: black; 然后你 missed border-style: solid;那：

.offers {
  display: grid;
  grid-template-columns: 32% 33% 32%;
  grid-column-gap: 20px;
}

.offers div {
  border: 3px solid red;
   /* border-width:3px;
  border-color:red;
  border-style:solid; */
  background-color: white;
}

.abouttext {
  color: black;
  font-size: 100px;
  text-align: right;
  margin: 0px;
  margin-right: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
}

<div class="offers">
  <div>
    <h3>Access To A Massive Library Of Education</h3>
    <p>With Summit you get an unlimited selection of indepth, engaging content for free.</p>
  </div>
  <div>
    <h3>No Extra Payed Upgrades</h3>
    <p>Summit says no to any extra add-ons or premium upgrades with pay walls. Everything is all free and hassle free.</p>
  </div>
  <div>
    <h3>We Are Advert Free</h3>
    <p>We all hate adverts, especially when we are engaged in content. Summit is happy to inform you that we are advert free!</p>
  </div>
</div>

Answer 4

在你的 class div;

添加 border-style 属性

例如border-style: solid;

我怎样才能显示边框？它没有显示

How can I make the borders show? It's not showing

html

css

border