Css 如何去除引导卡中的白色边框？更改边框颜色不起作用

我成功地实现了我脑海中的一个小概念，但引导卡上的每一张图像都有一个白色边框。我不能用边界来改变它

为什么会发生这种情况？ 我如何解决它？ 我试过了！在边境上很重要，它没有改变。 我可以简单地用CSS解决它吗？我现在不想使用JS

---

代码的jFIDLE链接：

在代码中尝试以下样式

nav h1 
    {
        vertical-align: middle;   
        background-color: rgb(0, 0, 0);
        border: 10px solid rgba(0, 0, 0, 0);
        text-align: center;
        position: fixed;
        position: top;
        min-width: 100%;
        z-index: 3;

    }
.nav ul 
{
    vertical-align: middle;
    -webkit-font-smoothing:antialiased;
    text-shadow:0 1px 0 rgba(255, 255, 255, 0);
    background: rgb(0, 0, 0);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    z-index: 3;
}
.nav li 
{
    vertical-align: middle;
    float: left;
    margin: 0;
    padding: 100; 
    position: relative;
    min-width: 20%;
    z-index: 3;
}
.nav a 
{
    vertical-align: middle;
    background: rgb(0, 0, 0);
    display: block;
    font: bold 15px/50px helvetica;
    padding: 0 0 0 0px;
    text-align: center;
    text-decoration: none !important;
    color: rgb(255, 255, 255);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
            transition: all .25s ease;
            z-index: 3;
}
.nav .dropdown:after 
{
    content: '';
}
.nav .dropdown:hover:after
{
    content:''
}
.nav li:hover a 
{
    color: white;
    background: rgb(0, 0, 0);
}
.nav li ul 
{
    vertical-align: middle;
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 4;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
            transition: all .25s ease;
}
.nav li:hover ul 
{
    opacity: 1;
    top: 50px;
    visibility: visible;
}
.nav li ul li 
{
    float: none;
    width: 100%;
}
.nav li ul a:hover 
{
    background: rgb(255, 0, 0);
}

body{
    background: linear-gradient(to right, rgb(39, 38, 38), rgb(177, 72, 72),rgb(39, 38, 38))
}
.cardpop {
    transition: all 0.5s;
  }

  .cardpop:hover {
    transform: scale(1.1);
    box-shadow: rgb(37, 37, 37);
    transition: all 0.5s;
  }

  .cardpop:hover:before {
    opacity: 1;
  }

.cardpop:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
      transition: .15s all ease-out;
      opacity: 0;
      border-radius: 5px;
  }

---

它将删除卡元素的边框和背景色。

请在代码中尝试以下样式

nav h1 
    {
        vertical-align: middle;   
        background-color: rgb(0, 0, 0);
        border: 10px solid rgba(0, 0, 0, 0);
        text-align: center;
        position: fixed;
        position: top;
        min-width: 100%;
        z-index: 3;

    }
.nav ul 
{
    vertical-align: middle;
    -webkit-font-smoothing:antialiased;
    text-shadow:0 1px 0 rgba(255, 255, 255, 0);
    background: rgb(0, 0, 0);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    z-index: 3;
}
.nav li 
{
    vertical-align: middle;
    float: left;
    margin: 0;
    padding: 100; 
    position: relative;
    min-width: 20%;
    z-index: 3;
}
.nav a 
{
    vertical-align: middle;
    background: rgb(0, 0, 0);
    display: block;
    font: bold 15px/50px helvetica;
    padding: 0 0 0 0px;
    text-align: center;
    text-decoration: none !important;
    color: rgb(255, 255, 255);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
            transition: all .25s ease;
            z-index: 3;
}
.nav .dropdown:after 
{
    content: '';
}
.nav .dropdown:hover:after
{
    content:''
}
.nav li:hover a 
{
    color: white;
    background: rgb(0, 0, 0);
}
.nav li ul 
{
    vertical-align: middle;
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 4;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
            transition: all .25s ease;
}
.nav li:hover ul 
{
    opacity: 1;
    top: 50px;
    visibility: visible;
}
.nav li ul li 
{
    float: none;
    width: 100%;
}
.nav li ul a:hover 
{
    background: rgb(255, 0, 0);
}

body{
    background: linear-gradient(to right, rgb(39, 38, 38), rgb(177, 72, 72),rgb(39, 38, 38))
}
.cardpop {
    transition: all 0.5s;
  }

  .cardpop:hover {
    transform: scale(1.1);
    box-shadow: rgb(37, 37, 37);
    transition: all 0.5s;
  }

  .cardpop:hover:before {
    opacity: 1;
  }

.cardpop:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
      transition: .15s all ease-out;
      opacity: 0;
      border-radius: 5px;
  }

它将删除卡元素的边框和背景色。

试试这个

.card {
    border: 0;
    background-color: transparent;
}

试试这个

.card {
    border: 0;
    background-color: transparent;
}

---

Bootstrap 4包含一些border实用程序类-您可以在Bootstrap文档中找到它们

例如，您感兴趣的是

border-0

  .card.img-fluid {
    border-color: transparent;
    background-color: transparent;
  }

。。。

---

Boostrap卡在一些内部元素（标题、主体等）上有边框。确保将类添加到正确的元素中。

Bootstrap 4包含一些border实用程序类-您可以在Bootstrap文档中找到它们

例如，您感兴趣的是

border-0

  .card.img-fluid {
    border-color: transparent;
    background-color: transparent;
  }

。。。

---

Boostrap卡在一些内部元素（标题、主体等）上有边框。确保将类添加到正确的元素中

能否将其转换为代码片段？非常抱歉，我是web编程的新手。你能告诉我什么是片段吗？我会尽力去做的。比我能解释的更好。我理解代码片段是什么，但我似乎无法转换。所以我上传了代码到JSFIDLE，我上传了JSFIDLE的链接！你能把它转换成一个片段吗？我真的很抱歉，我是一个网络编程新手。你能告诉我什么是片段吗？我会尽力去做的。比我能解释的更好。我理解代码片段是什么，但我似乎无法转换。所以我上传了代码到JSFIDLE，我上传了JSFIDLE的链接@JeevaBharathi您应该接受这个答案，因为它使用引导默认实用程序类。而且不需要其他额外的CSS。作为答案，伙计：D@JeevaBharathi您应该接受这个答案，因为它使用引导默认实用程序类。而且不需要其他额外的CSS。作为答案，伙计：D