在微信小程序里实现底部弹窗时，设计师经常给出这样一种效果：弹窗从屏幕底部滑出，顶部呈现柔和的圆角，而底部则紧贴屏幕下边缘保持直角。这个看似简单的需求，实际上暗藏不少样式细节。如果直接给整个容器加上 border-radius: 24rpx，那么弹窗的四个角都会变圆，底部也会脱离屏幕边缘，视觉上出现一道不该有的空隙，整个弹窗像是悬浮在屏幕底部而不是贴合上去的。
要正确实现顶部圆角底部直角，核心是放弃简写属性 border-radius，改用拆分后的四个独立角属性。CSS 中 border-radius 可以拆成 border-top-left-radius、border-top-right-radius、border-bottom-left-radius 和 border-bottom-right-radius。在微信小程序的 WXSS 里，这些属性同样生效。想要顶部圆角，就给前两个属性设置非零值，后两个保持 0。比如 border-top-left-radius: 24rpx; border-top-right-radius: 24rpx; 底部两个角不写或者写成 0，就能精确得到需要的形状。
一、弹窗圆角设计背后的视觉逻辑
底部弹窗在移动端设计语言中非常常见，它通常用于承载表单、操作菜单或次级信息。之所以采用顶部圆角、底部直角，是因为底部弹窗的底边需要与屏幕物理边界对齐，形成一种“抽屉”般的延伸感。如果底部也有圆角，弹窗就会像一块独立的卡片漂浮在屏幕底部，破坏了贴合感，同时也会在底部露出背景遮罩层的颜色，显得不够干净。
从实现角度来说，顶部圆角还能带来更好的手指操作体验。在用户从屏幕底部向上滑动或点击触发弹窗时，手指往往先触碰到弹窗顶部边缘，圆角可以减少直角带来的生硬感。另外在视觉上，圆角能柔化弹窗与背景遮罩之间的过渡，让整个界面更协调。因此很多设计规范都明确要求底部弹窗只保留顶部圆角，底部保持锐利。
在微信小程序中，由于 WXSS 完全兼容 CSS 的圆角属性，理论上可以无缝实现。但要注意一点：小程序里常用的 rpx 单位是基于屏幕宽度 750rpx 换算的，在不同设备上实际像素不同。设置圆角时使用 rpx 可以保证视觉比例一致，但如果混用 px 可能导致不同机型上圆角大小有细微差异，建议统一使用 rpx 来定义圆角半径。
二、自定义 modal 组件的基本结构
小程序官方提供了 wx.showModal 等 API，但这些原生弹窗样式固定，无法满足顶部圆角底部直角这类定制需求。所以通常需要自己用 view 组件搭建一个自定义 modal。一个典型的底部弹窗结构包含两个部分：半透明遮罩层和底部内容容器。遮罩层铺满全屏，点击后关闭弹窗；内容容器定位在屏幕底部，宽度 100%，高度根据内容自适应。
<!-- 底部自定义弹窗 WXML 结构 -->
<view class="modal-mask" wx:if="{{showModal}}" bindtap="closeModal"></view>
<view class="modal-content" wx:if="{{showModal}}">
<view class="modal-header">
<text>选择操作</text>
</view>
<view class="modal-body">
<text>这里是弹窗内容区域</text>
</view>
</view>
上面结构中的 modal-mask 就是遮罩层。为了让它覆盖整个屏幕并位于内容层下方，需要设置 position: fixed 以及合适的 z-index。内容容器同样使用 fixed 定位，通过 left: 0; right: 0; bottom: 0; 让元素固定在底部。这样即使内容高度变化，弹窗始终贴合屏幕底边。
样式上需要特别注意遮罩层和内容层不能互相继承或影响。建议给遮罩层设置独立的背景色 rgba(0,0,0,0.5)，并设置 pointer-events 属性，避免遮罩层截获点击事件。内容容器使用白色背景，顶部两个圆角就是在这里设置。下面是核心 WXSS 代码：
/* 遮罩层：全屏半透明 */
.modal-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
/* 弹窗内容容器：底部定位，顶部圆角底部直角 */
.modal-content {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #ffffff;
z-index: 1001;
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
/* 底部两个角保持默认 0，不设置圆角 */
overflow: hidden;
padding-bottom: env(safe-area-inset-bottom);
}
代码中的 overflow: hidden 很关键。如果不设置，当弹窗内部的子元素拥有自己的背景色或超出容器边界时，可能会覆盖顶部圆角，导致圆角看起来失效。而 padding-bottom: env(safe-area-inset-bottom) 是为了适配 iPhone 底部黑色横条区域，避免内容被遮挡。这个值在不支持安全区域的设备上会被忽略，可以放心使用。
三、完整的交互逻辑与动画优化
一个体验良好的底部弹窗除了静态样式，还需要配合显示隐藏逻辑和过渡动画。在 JavaScript 中，通过一个布尔变量控制弹窗的显示状态。常见做法是使用 wx:if 或者 hidden，但为了动画效果，更推荐结合 CSS transition 来实现平滑滑入。不过小程序中如果使用 wx:if，元素会在条件变化时销毁和重建，无法触发过渡动画。因此通常会使用一个额外的 class 来控制 transform 的位移。
// 弹窗显示逻辑
Page({
data: {
showModal: false,
modalAnimation: false // 控制弹窗内容是否滑入
},
openModal() {
this.setData({ showModal: true });
// 下一帧触发动画，保证元素已经渲染
wx.nextTick(() => {
this.setData({ modalAnimation: true });
});
},
closeModal() {
this.setData({ modalAnimation: false });
// 等待动画结束后再销毁元素
setTimeout(() => {
this.setData({ showModal: false });
}, 300);
}
});
对应的 WXSS 需要为内容容器增加一个初始状态和过渡状态。例如先设置 transform: translateY(100%); 当 modalAnimation 为 true 时，将 transform 改为 translateY(0); 同时添加 transition: transform 0.3s ease; 这样弹窗就会从屏幕底部平滑滑入。注意动画过程中，顶部圆角始终保留，不会因为位移而变化。
/* 弹窗内容默认隐藏在屏幕下方 */
.modal-content {
transform: translateY(100%);
transition: transform 0.3s ease;
}
/* 显示状态 */
.modal-content.modal-show {
transform: translateY(0);
}
在 WXML 中需要把 modal-show 这个类名绑定到内容容器上。可以用双大括号拼接 class，例如 <view class="modal-content {{modalAnimation ? 'modal-show' : ''}}">。这样当 modalAnimation 变化时，类名切换触发过渡动画。
四、常见问题与调试技巧
第一个常见问题是点击遮罩层关闭弹窗时，事件偶尔会冒泡到内容容器上。虽然内容容器在遮罩层上方，但因为两者是兄弟节点，点击内容区域不会触发遮罩的 bindtap。不过如果内容容器内部存在透明区域或事件穿透，可能出现误关。解决办法是在内容容器上添加 catchtap 阻止冒泡，确保只有点击遮罩层才会关闭。
第二个问题是在部分安卓机型上，底部直角区域会出现一条细小的白色缝隙。这通常是由于屏幕底部圆角或异形屏裁切导致的。可以通过给内容容器增加一个与背景色相同的底部扩展或使用 overflow: hidden 配合负 margin 来解决。另外确保底部没有设置 margin 或 border，只依赖 bottom: 0 定位。
第三个问题与 iOS 的安全区域有关。如果弹窗底部有按钮，没有加 env(safe-area-inset-bottom) 时，按钮会被 Home 横条遮挡。正确做法是把安全区域内边距加在弹窗内容容器的 padding-bottom 上，同时把圆角设置保持不变。对于不需要安全区域的场景，可以省略这一行，避免出现多余空白。
调试时可以利用微信开发者工具的模拟器切换不同机型，观察顶部圆角和底部直角的显示效果。重点检查内容超出时圆角是否被裁剪、遮罩层透明度是否合适、滑动动画是否流畅。通过不断调整 border-top-left-radius 和 border-top-right-radius 的数值，可以灵活适配不同设计规范，比如 16rpx 的轻微圆角或 32rpx 的大圆角。