问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
不明白
    232

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

    <!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>

    image.png

    我希望能够消除这些白边

    前端css3
    阅读 2k
    avatarAI BotBETA

    这个问题是由于父元素div的圆角（border-radius）和溢出隐藏（overflow: hidden）属性导致的。当父元素div的圆角半径大于其子元素img的半径时，会在圆角位置产生一个“白边”效果。

    要解决这个问题，你可以尝试以下几种方法：

    1. 设置子元素的圆角：你可以尝试给子元素img也设置一个圆角，使其与父元素的圆角相匹配。这样，当子元素超出父元素边界时，也会呈现圆角效果，从而消除白边。
    img {
  border-radius: 18px; /* 设置与父元素相同的圆角 */
  /* 其他样式保持不变 */
}
    1. 调整父元素的圆角：如果你不希望修改子元素的样式，也可以尝试减小父元素div的圆角半径，使其与子元素的半径相匹配。
    div {
  border-radius: 18px; /* 调整为与子元素相同的圆角 */
  /* 其他样式保持不变 */
}
    1. 使用伪元素覆盖白边：如果上述方法不起作用，你还可以尝试使用伪元素（::before 或 ::after）来覆盖白边。这种方法需要一些额外的样式和布局调整。

    以上方法都可以用来消除父元素div的圆角和溢出隐藏导致的白边问题。你可以根据实际情况选择最适合你的方法。

    1 个回答
    得票最新
    头像
    小木爱旅行
      22536
      ✓ 已被采纳

      这样加个伪类把：

      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);
    }

      image.png

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏