Question

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

正如您所看到的，模态具有border-radius但页脚处的按钮不会。我想在紫色按钮的左下角放置一个边框半径，在灰色按钮的右下角放置一个边框半径。我已经尝试过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

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

＆＃13;

border-radius

＆＃13;

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;
}

＆＃13;

Answer 2

将边框半径放在紫色按钮的左下角您可以在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 3

将以下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 4

正如所讨论的那样，在css

中将边界半径设置为零很重要

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

尝试将其评论出来然后添加到底部。

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

Border radius

它允许您单独设置边框半径或一次设置所有边框半径。它还为您提供了CSS。

干杯

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

AuthentificationService implementation

溢出：隐藏解决它。

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

6 个答案: