css 元素圆角泄漏到前面时使用溢出：隐藏

9gm1akwq 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(147)

我只是试图通过将border-radius: 50px和overflow: hidden添加到其父元素来为Video.js播放器添加圆角，但在其角落处有视频播放器背景的痕迹。
我试着用最少的html和css来隔离这个问题：https://jsfiddle.net/4uj7as38/66/ .我希望那些来自box2的黑色圆角不会出现，因为box1的大小和它完全一样。

.container {
  border-radius: 50px;
  height: 200px;
  position: relative;
  overflow: hidden;
  width: 500px;
}

.box1 {
  background-color: white;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.box2 {
  background-color: black;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

个字符
这是一个已知的CSS问题吗？你知道任何聪明的解决方法吗？
尝试框大小调整，并尝试用另一个圆形边框覆盖另一个div，但边框似乎合并在一起

css

来源：https://stackoverflow.com/questions/77748631/element-rounded-corners-leaking-out-to-front-when-using-overflow-hidden

1条答案

按热度按时间

7fyelxc51#

使用mask而不是overflow: hidden应该可以解决这个问题。它们并不完全相同，但在视觉上它们应该给予相同的结果

.container {
  border-radius: 50px;
  height: 200px;
  -webkit-mask: linear-gradient(#000 0 0); /* ADDED */
  width: 500px;
}

.box1 {
  background-color: white;
  height: 100%;
  position: relative;
  z-index: 1;
}

.box2 {
  background-color: black;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

个字符

赞(0）回复(0）举报 2024-01-09

我来回答

css 元素圆角泄漏到前面时使用溢出：隐藏

1条答案

相关问题

热门标签

最新问答