这个样式有没有大佬提供下思路尝试过内凹圆角，还是不行

如何实现图片中所示的内凹圆角样式?

AI BotBETA

要在图片上实现内凹圆角样式，你可以使用CSS的border-radius属性配合background-clip和padding来实现。下面是一个简单的示例，展示了如何创建一个具有内凹圆角效果的元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内凹圆角示例</title>
    <style>
        .concave-corners {
            width: 200px;
            height: 200px;
            background-color: #888;
            border-radius: 20px;
            padding: 20px;
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <div class="concave-corners"></div>
</body>
</html>

在这个示例中，.concave-corners类定义了一个具有内凹圆角的元素。border-radius属性设置了圆角的半径，padding属性则用于创建内凹效果。background-clip: content-box;确保背景色（在这里是灰色）只填充内容区域，不包括padding，从而创建了内凹的视觉效果。

你需要将这个样式应用到你想要添加内凹圆角的图片上。如果你的图片是一个<img>元素，你可能需要将其包装在一个具有上述样式的容器中，或者使用CSS的伪元素来实现类似的效果。

请注意，这种方法的效果可能因浏览器和版本的不同而有所差异。如果你需要更复杂的内凹效果或更广泛的浏览器兼容性，你可能需要使用SVG或Canvas等更高级的技术。

5 个回答

得票最新

陟上晴明

21.4k144991

发布于
2024-04-11 浙江

✓ 已被采纳

简单写了一个，思路就是这样的 👇

图片.png

右上角其实可以用渐变背景色实现会更加优雅一些，但有一个按钮在附近就省了这部分的，代码也更好理解一些。

🌰 CodePen Demo

<div class="demo">
  <div class="demo-container"></div>
  <div class="demo-arrow-btn"></div>
</div>

.demo
  width 300px
  padding-right 80px
  margin 20px
  position relative
  &-container
    height 140px
    background #f6f6f6
    border-radius 45px 45px 0 0 
    position relative
    &:before, &:after 
      width 80px
      height 80px
      content ''
      display block
      position absolute
      right 0
      transform translateX(100%)
    &:after
      width 30px
      height 30px
      background #f6f6f6
      bottom 60px
    &:before
      height 60px
      background #f6f6f6
      border-top-right-radius 45px 
      bottom 0
  &-arrow-btn
    width 70px
    height 70px
    background #f6f6f6
    border 10px solid white
    border-radius 50%
    position absolute
    right -9px
    top -9px