我的`border`中遇到错误，我该如何解决[查看详细信息] [重复]答案

【问题标题】：I encountered an error in my `border`, How can I solve it [see details] [SOLVED] [duplicate]我的`border`中遇到错误，我该如何解决[查看详细信息] [重复]
【发布时间】：2022-10-20 20:20:52
【问题描述】：

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

.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

再次感谢！

【问题讨论】：

标签： html css border

【解决方案1】：

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

【讨论】：

【解决方案2】：

在你的类 div 中添加 border-style 属性；

例如border-style: solid;

【讨论】：

【解决方案3】：

你可以简单地使用shorthand border: 3px solid red; insted of border-width: 10px; border-color: black; 而你错过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>

【讨论】：

【解决方案4】：

您尚未指定边框样式。

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

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>

【讨论】：