显示在有边界半径的黑匣子的白色角落

Question

我得到一个奇怪的效果（目前在chrome中）。我创建了自己的叠加对话框。它有一个半透明的背景，坐在我的网站顶部，上面有一个方框。你可以看到酒吧的顶部有一个黑色的背景。盒子的主要部分是白色的想法。

它不容易看到，但它让我烦恼。

白色从后面透过。 （我知道好像我把它改成红色就会改变颜色）你可以在屏幕截图的右上角看到，就在“X”上方

标题和框的边框半径均为3px

.blockUI .overlay {
    background: #f00;
    border-radius: 3px;
    margin: 0 auto;
    padding: 10px;
    overflow: hidden;
    position: relative;
        top: 20%;
    text-align: inherit;
    width: 600px;
    z-index: 10009;
}

blockUI .overlay h1 {
    background: #000;
    border-bottom: 2px solid #F48421;
    border-radius: 3px 3px 0 0;
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin: -10px;
    padding: 10px;
}

Answer 1

由于overflow: hidden;和border-radius似乎会在某些引擎(take a look at this)中导致某些渲染不一致，因此应在父元素和子元素上使用border-radius来实现圆角。

正如您所注意到的那样，您仍然可以通过额外的像素“闪亮”来获得一些奇怪的结果。只需减少孩子的边界半径（或相反的方向）来补偿这一点。

blockUI .overlay h1 {
    border-radius: 2px 2px 0 0;
}

Answer 2

我有同样的问题。但我解决了。

.blockUI .overlay {background:#000;}

并重拍一些！

Answer 3

你应该试试父div：

-webkit-background-clip: padding-box;

Answer 4

最后通过在父和子div上添加它来完全解决这个问题。

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;

Answer 5

我通过.blur（）解决了它

// find elements
var banner = $("#banner-message")
var button = $("button")
var p = $("p")
var front = 1
button.on("click", function(){
  banner.toggleClass("alt")
  if (front == 1) {
     p.html("Giovanni Gianni")
     front = 0
    
  }
  else {
    p.text("Guess my name")
    front = 1
}
$(this).blur()


})

body {
      background: #20262E;
      padding: 10px;
      font-family: Helvetica;
    }
    
    #banner-message {
      background: #fff;
      border-radius: 50px;
      padding: 20px;
      font-size: 25px;
      text-align: center;
      transition: all 0.2s;
      margin: 0 auto;
      width: 200px;
    }
   
    button {
      background: #0084ff;
      border-radius: 50px;
      padding: 8px 14px;
      font-size: 15px;
      color: #ff0;
    }
    
    #banner-message.alt {
      background: #0084ff;
      color: #fff;
      margin-top: 0px;
      width: 200px;
      border-radius: 50px;
    }
    
    #banner-message.alt button {
      background: #fff;
      color: #000;
      border-radius: 50px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
 <div id="banner-message">
  <p>Guess my name</p>
  <button>click here</button>
</div>