如何用纯HTML/CSS实现带顶部阴影的半圆融合条形效果？

核心实现思路 #

• 半圆与条形柔和融合：通过border-radius直接构建顶部半圆造型，配合容器尺寸让半圆与条形无缝衔接；若需要颜色过渡效果，用线性渐变分层实现自然柔和的衔接。
• 顶部弧形阴影：使用filter: drop-shadow()替代传统box-shadow，因为它会跟随元素的实际可见轮廓生成阴影，完美适配顶部半圆的弧度。

代码示例 #

HTML结构

<div class="curved-bar"></div>

CSS样式

.curved-bar {
  /* 尺寸配置：宽度决定半圆半径，高度 = 半圆半径 + 下方条形高度 */
  width: 300px;
  height: 230px;
  /* 顶部半圆造型：左右上圆角值设为宽度的一半 */
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;
  /* 基础背景色，可自行替换 */
  background-color: #4285F4;
  /* 顶部阴影：适配弧形的阴影效果 */
  filter: drop-shadow(0 -3px 5px rgba(0, 0, 0, 0.12));
}

/* 可选：半圆与条形颜色渐变过渡版本 */
.curved-bar.gradient-version {
  background: linear-gradient(
    to bottom,
    #4285F4 0%,
    #4285F4 150px, /* 半圆高度，等于宽度的一半 */
    #3367D6 150px,
    #3367D6 100%
  );
}

关键细节说明 #

1. 造型适配：border-top-left/right-radius的数值设为容器宽度的一半，就能精准生成顶部半圆，无需额外伪元素或SVG。
2. 阴影适配：普通box-shadow是基于元素的矩形盒模型生成阴影，而drop-shadow会识别元素的圆角轮廓，所以能完美呈现顶部半圆的阴影效果。
3. 响应式调整：如果需要适配不同屏幕尺寸，可将单位改为百分比：

   .curved-bar {
     width: 80%;
     height: calc(40% + 80px); /* 40%是半圆高度，80px是条形高度 */
     border-top-left-radius: 40%;
     border-top-right-radius: 40%;
   }
   

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