如何在按钮的特定角上放置边框半径

Question

我有一个看起来像这样的模式

如您所见，模态框有边框半径，但页脚处的按钮没有。我想在紫色按钮的左下角放置一个边框半径，在灰色按钮的右下角放置一个边框半径。我试过border-bottom-left-radius和border-bottom-right-radius，但它没有用。这是我的代码

模态：

<!--Notifier Modal-->
<div id="notifier-modal" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
   <div class="modal-dialog modal-md" role="document">
       <div class="modal-content">
           <div class="modal-body">
               <div class="row">
                   <div class="col-md-12">
                       <div class="confirm-purchase-label">
                           Only {{size}} out of {{totalsize}} transactions have been loaded <br>
                           <h5>The complete list of transactions will be sent to your email after the process.</h5>
                       </div>
                   </div>
               </div>
           </div>

           <div class="modal-footer g-nopadding">
               <div class="col-md-6 g-nopadding">
                   <button type="button" class="btn btn-purple btn-block col-md-6" ng-click="proceedAction();">PROCEED</button>
               </div>
               <div class="col-md-6 g-nopadding">
                   <button type="button" class="btn btn-gray btn-block col-md-6" data-dismiss="modal">CANCEL</button>
               </div>
           </div>
       </div>
   </div>

CSS：

#notifier-modal .btn,
{
    border: none!important;
    border-radius: 0px!important;
    font-family: 'AvenirMedium';
    height: 50px!important;
}

#notifier-modal .modal-md{
    width: 500px;
}

.modal-footer {
   padding: 15px;
   text-align: right;
   border-top: 1px solid #e5e5e5;
}

.modal-content{
   background:#f0f0f0;
   box-shadow:0px 0px 30px 0px rgba(101,101,101,0.50);
   border: none;
}

.btn-gray {
   color: #797979!important;
   background:#e0e0e0!important;
   font-size:14px!important;
   border: none!important;
}   

.btn-purple {
   color: #f0f0f0!important;
   background-color: #9c82cd!important;
   font-size:14px!important;
   border: none!important;
}

Answer 1

.modal-footer{
   border-bottom-left-radius: 5px; 
   border-bottom-right-radius: 5px; 
   overflow: hidden;
}

overflow: hidden 解决了。

Answer 2

您可以将border-radius 应用于已经具有左上/右上边框半径的模态的所有侧面，并假设按钮位于该元素的底角，如果您还添加overflow: hidden 到带有border-radius 的模态框，它将剪切按钮的角。

body {
  background: #aaa;
  text-align: center;
}
div {
  background: #fff;
  border-radius: 1em;
  padding: 1em;
  display: inline-block;
  width: 200px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
button {
  position: absolute;
  bottom: 0;
  padding: 0;
  margin: 0;
  width: 50%;
  left: 0;
  padding: .5em 0;
  background: #09c;
  color: white;
  border: 0;
}
button:last-child {
  left: auto;
  right: 0;
  border-left: 1px solid white;
}

<div>
  <button>button</button>
  <button>button</button>
</div>

Answer 3

在紫色按钮的左下角放置一个边框半径可以在CSS下面使用

.btn-purple {
color: #f0f0f0!important;
background-color: #9c82cd!important;
font-size: 14px!important;
border: none!important;
border-radius: 0 0 0 20px; /*20px is example you can use how much radius you want*/
}

在灰色按钮的右下角放置一个边框半径。你可以使用下面的CSS

.btn-gray {
color: #797979!important;
background: #e0e0e0!important;
font-size: 14px!important;
border: none!important;
border-radius: 0 0 20px 0;
}

Answer 4

将以下 CSS 添加到您的按钮并相应地进行调整

-moz-border-radius-topleft: 0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px; 

Answer 5

问题只是一个词序问题:)

您要查找的属性不是border-radius-bottom-left 和border-radius-bottom-right，而是border-bottom-left-radius 和border-bottom-right-radius：

.modal-footer {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

希望这会有所帮助！ :)

Answer 6

如前所述，您在 css 中将边框半径设置为零很重要

#notifier-modal .btn,
{
border: none!important;
border-radius: 0px!important;
font-family: 'AvenirMedium';
height: 50px!important;
}

尝试将其注释掉，然后添加到底部。

网上有很多资源，但我找到的最好的是

Border radius

它可以让您单独或一次性设置边框半径。它还为您提供了要使用的 CSS。

干杯