显示在有边界半径的黑匣子的白色角落 [英] White corner showing on black box with Border-radius

问题描述

我得到一个奇怪的效果（目前在chrome）。我已经创建了自己的覆盖对话框。它有一个半透明的背景坐在我的网站上面有一个盒子顶部。在酒吧的顶部，你可以看到有一个黑色的背景。

$ b

p>

白色从后面显示。 （我知道，如果我改变它为红色，它改变颜色）你可以看到屏幕截图的右上角，刚好在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; 
} 
  

解决方案

> overflow：hidden; 和 border-radius 似乎会导致一些引擎中的一些渲染不一致（看看这个），应该在父元素和子元素上使用border-radius以实现圆角。

正如你所注意到的，你仍然会得到一些更加奇怪的结果，有额外的像素闪耀。

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

I am getting a odd effect (currently in chrome). I have created my own overlay dialog box. which has a semi transparent background sitting on top of my website with a box on top of that. the top of the bar as you can see has a black background. The main part of the box is white thought.

Its not the easyist to see but it is annoying me.

The white is showing through from behind. (I know as if i change it to red it changes colour) Which you can see in the top right hand corner of the screenshots, just above the "X"

Both the header and the box has a border radius 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;
}

解决方案

Since overflow: hidden; along with border-radius seems to cause some rendering inconsistencies in some engines (take a look at this), one should use border-radius on both the parent and the child elements to achieve rounded corners.

As you have noticed, you still get some wierd results with extra pixels "shining" through. Just reduce the border-radius of the child (or the other way round) to compensate this.

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

这篇关于显示在有边界半径的黑匣子的白色角落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！