BorderRadius 显示不同的背景颜色答案

【问题标题】：BorderRadius showing different background colorBorderRadius 显示不同的背景颜色
【发布时间】：2022-02-02 02:12:00
【问题描述】：

我正在尝试使用 div 的反应在中心创建一个框。边界半径正在工作，但角落的颜色与背景不同。我试过使用 overflow: hidden 但它什么也没做。

代码：

import React from 'react';
import { Paper, Box } from "@mui/material"

import '../styling/Results.css';

function Results() {
  

  return (
    <div className="container">
      
      <div className='wrapper'>
        <Paper elevation={10}>

          <div className="Box">

            <div className="Items">
              <h1> Results </h1>
            </div>
          
          </div>

        </Paper>
      </div>

    </div>
  );
}

export default Results;

CSS：

.wrapper{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: beige;

}

.Box {
    height: 400px;
    width: 500px;
    background: black;
    color: white;
    display: flex;
    border-radius: 30px;
    overflow: hidden;
}

下面是它的样子： Screenshot

【问题讨论】：

标签： html css reactjs overflow border-radius

【解决方案1】：

我明白了。问题出在纸边框半径上。为了解决这个问题，我只是更改了 Paper 的边框半径以匹配我的 div，如下所示：

<Paper sx={{borderRadius:"30px"}} elevation={10}></Paper>

【讨论】：

【解决方案2】：

  return (
    <div className="container">
      <div className="wrapper">
        <Paper
          style={{ boxShadow: "none", background: "transparent" }}
          elevation={10}
        >
          <div className="Box">
            <div className="Items">
              <h1> Results </h1>
            </div>
          </div>
        </Paper>
      </div>
    </div>
  );

【讨论】：