Question

我有一个div类.text-center，并且我试图隐藏按钮的边框。

css是：

.text-center:nth-of-type(even){border-radius: 10px; box-shadow: 0px 0px 10px; border: none;}

这为它提供了10px的边框半径，但不允许20px的边框半径，也不允许我隐藏使按钮模糊的边框。

也尝试过：

.text-center a {border: none !important; box-shadow : none;}

但这会隐藏其他按钮的边框。当a仅在该div类下列出时，怎么办？

这可能是特异性问题吗？在div类上方的框架.text-center中尝试了框架

HTML：

    <div class="event_registration registration">

    <input type="button" class="registration_button button" value="Register for event" />

    <div class="registration_details">
        <p>To register for this event please visit the following URL: <a href="https://dice.fm/festival/camden-rocks-festival?_branch_match_id=655373442484550779" target="_blank" rel="nofollow">https://dice.fm/festival/camden-rocks-festival?_branch_match_id=655373442484550779 &rarr;</a></p>     </div>
        </div>
                 <!-- For more details information start -->
                          <div class="text-center">
                <a class="link-button" data-toggle="modal" href="https://www.theunderworldcamden.co.uk/event/camden-rocks-festival-2019/"  target="_blank" >View More Details</a>
              </div> 

         <!-- For more details infomation end-->
         <!-- Video popup box section start -->
                     <!-- Video popup box section end -->
        &nbsp;


 <!-- Event Location and Time start-->   

    <h3 class="section-title">When & Where</h3>
      <ul class="when-where">
        <li class="event-start-date">                                          
         From:2019-06-01 &nbsp; 12:00 PM            </li>
        <li class="event-end-date">                                             
         To:2019-06-02&nbsp;12:00 AM            </li>
        <li class="event-location">                     
         Location:
                       <span class="venue-name"> 
            The Underworld

https://adsler.co.uk/event/camden-rocks-festival/

Answer 1

尝试在.link-button类中删除border和box-shadow属性

Answer 2

您的链接上有阴影和边框

a.link-button {
display: inline-block;
border-radius: 4px;
margin: 0 0 10px;
padding: 8px 7px;
border: none;
box-shadow: none;
float: left;
width: 100%;
}

将其放在CSS中，应将其从该链接按钮中删除。我建议给出链接和ID，并仅从该链接中删除它，以免影响其他任何链接。

Answer 3

如果此按钮是唯一的，则应以#id为目标。

但是，如果这是我，我将创建一个borderless类，并将其仅应用于我要忽略边框的按钮。

只要该类别在您的其他按钮样式之后列出，它将覆盖所有注明的样式。

.borderless {
  border: none;
  box-shadow: none;
}

<a class="link-button borderless" data-toggle="modal" href="https://www.theunderworldcamden.co.uk/event/camden-rocks-festival-2019/" target="_blank">View More Details</a>

注意

确保此样式的特异性大于您的其他类，以确保已应用并且避免使用!important

如果仅将其应用于锚标签，例如使用：

a.borderless{}

Answer 4

尝试一下

.entry-content a { 
display: inline-block; 
border: none; 
text-decoration: none; 
box-shadow: none; 
}

如何隐藏边框？

4 个答案: