如何用CSS实现反向圆角边框及弧形边缘的十字形样式？

方法一：单个元素 + 复杂clip-path（推荐） #

直接用单个元素，通过clip-path定义十字轮廓，配合border-radius实现内外弧形，再用内阴影模拟边框（避免border被裁剪）：

.cross-shape {
  width: 200px;
  height: 200px;
  /* 定义十字的基础轮廓 */
  clip-path: polygon(
    30% 0%, 70% 0%,
    70% 30%, 100% 30%,
    100% 70%, 70% 70%,
    70% 100%, 30% 100%,
    30% 70%, 0% 70%,
    0% 30%, 30% 30%
  );
  /* 统一设置所有转角的圆角大小，数值越大弧形越明显 */
  border-radius: 20px;
  /* 用内阴影模拟边框，最后一个值是边框宽度 */
  box-shadow: inset 0 0 0 4px #000;
  background: #fff;
}

如果需要不同位置的弧形大小不一样，把border-radius改成多值写法即可，比如border-radius: 15px 25px 15px 25px / 25px 15px 25px 15px，斜杠前后分别对应水平和垂直方向的圆角。

方法二：多元素拼接（精细控制局部弧形） #

要是需要单独调整每个臂的弧形，用5个元素拼接（中心块+四个臂），伪元素用来做交叉处的反向圆角：

<div class="cross-container">
  <div class="cross-center"></div>
  <div class="cross-arm top"></div>
  <div class="cross-arm right"></div>
  <div class="cross-arm bottom"></div>
  <div class="cross-arm left"></div>
</div>

.cross-container {
  position: relative;
  width: 200px;
  height: 200px;
}
.cross-center {
  position: absolute;
  top: 30%; left: 30%;
  width: 40%; height: 40%;
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 4px #000;
}
.cross-arm {
  position: absolute;
  background: #fff;
  box-shadow: inset 0 0 0 4px #000;
}
/* 顶部臂 */
.top {
  top: 0; left: 30%;
  width: 40%; height: 30%;
  border-radius: 20px 20px 0 0;
}
.top::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 20px;
  background: #fff;
  border-radius: 0 0 20px 20px;
}
/* 右侧臂 */
.right {
  top: 30%; right: 0;
  width: 30%; height: 40%;
  border-radius: 0 20px 20px 0;
}
.right::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 20px; height: 100%;
  background: #fff;
  border-radius: 20px 0 0 20px;
}
/* 底部臂 */
.bottom {
  bottom: 0; left: 30%;
  width: 40%; height: 30%;
  border-radius: 0 0 20px 20px;
}
.bottom::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 20px;
  background: #fff;
  border-radius: 20px 20px 0 0;
}
/* 左侧臂 */
.left {
  top: 30%; left: 0;
  width: 30%; height: 40%;
  border-radius: 20px 0 0 20px;
}
.left::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 20px; height: 100%;
  background: #fff;
  border-radius: 0 20px 20px 0;
}

这种方法可以单独修改每个臂的弧形大小，适合需要差异化设计的场景。

内容的提问来源于stack exchange，提问作者Best Smurfur