父元素div背景为白色并设置了圆角和溢出隐藏，子元素是一张图片，在圆角位置会有白边，怎么解决啊？

站长

2024年06月23日 08:23 · 阅读数 4

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background-color: #000;
      height:100vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    div {
      width: 1280px;
      height: 720px;
      border-radius: 36px;
      background: #fff;
      overflow: hidden;
      font-size: 0;
    }

    img {
      width: 100%;
      height: 100%;
      transition: 250ms;
    }
    img:hover{
      transform: scale(1.2);
    }
  </style>
</head>

<body>
  <div>
    <img src="https://drive.le5lecdn.com/2023/1130/1/1/冷源群控系统_e37d8fb3" alt="">
  </div>
</body>

</html>

父元素div背景为白色并设置了圆角和溢出隐藏，子元素是一张图片，在圆角位置会有白边，怎么解决啊？

我希望能够消除这些白边

1个回答

test

2024-06-23

这样加个伪类把：

div {
      width: 1280px;
      height: 720px;
      border-radius: 36px;
      position: relative;
      overflow: hidden;

    }

    div::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 40px;
    }

    img {
      width: 100%;
      height: 100%;
      transition: 250ms;
      position: relative;
      z-index: 2;
      border-radius: 36px;
    }

    img:hover {
      transform: scale(1.2);
    }

answer image

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容