CSS：overflow内容溢出和border-radius设置圆角

大前端 uni-app css

发布时间 : 2026-03-01 00:00

字数:1.7k 阅读 :

overflow
border-radius
overflow 与 border-radius

overflow

overflow 的常用值（4 个）

overflow 是 CSS 中控制内容溢出容器时如何显示的关键属性。

值	说明	是否裁剪内容	滚动条
`visible`	默认值。内容溢出时可见（不裁剪）	❌ 否	无
`hidden`	内容溢出时隐藏（裁剪）	✅ 是	无
`scroll`	内容溢出时始终显示滚动条（即使没溢出）	✅ 是	始终显示
`auto`	内容溢出时自动显示滚动条（推荐常用）	✅ 是	溢出时显示

在 uni-app / 小程序中，overflow 主要用于 H5 和 App 平台；
微信小程序对 view 的 overflow 支持有限（通常需用 scroll-view 实现滚动）。

案例

<template>
  <view class="container">
    <!-- 1. visible（默认） -->
    <view class="demo-title">1. overflow: visible（默认，内容溢出可见）</view>
    <view class="box visible-box">
      <view class="inner">我超出啦！</view>
    </view>

    <!-- 2. hidden -->
    <view class="demo-title">2. overflow: hidden（裁剪溢出）</view>
    <view class="box hidden-box">
      <view class="inner">我被裁剪了！</view>
    </view>

    <!-- 3. auto（推荐用于可滚动区域） -->
    <view class="demo-title">3. overflow: auto（溢出时显示滚动条 - H5有效）</view>
    <view class="box auto-box">
      <view class="long-content" v-for="i in 10" :key="i">段落 {{ i }}</view>
    </view>

    <!-- 4. scroll -->
    <view class="demo-title">4. overflow: scroll（始终显示滚动条 - H5有效）</view>
    <view class="box scroll-box">
      <view class="short-content">短内容</view>
    </view>
  </view>
</template>

<script>
export default {}
</script>

<style lang="scss">
.container {
  padding: 10rpx;
}

.demo-title {
  font-weight: bold;
  margin: 10rpx 0 20rpx;
  color: #333;
}

.box {
  width: 500rpx;
  height: 100rpx;
  background: #f0f9ff;
  border: 2rpx solid #409eff;
  margin-bottom: 10rpx;
  padding: 20rpx;
}

/* 1. visible（默认，可省略） */
.visible-box {
  overflow: visible; /* 可不写，默认就是 visible */
}
.visible-box .inner {
  width: 200rpx;
  height: 50rpx;
  background: #ffcccc;
  margin-top: 100rpx; /* 故意超出 */
}

/* 2. hidden */
.hidden-box {
  overflow: hidden;
}
.hidden-box .inner {
  width: 200rpx;
  height: 80rpx;
  background: #ccffcc;
  margin-top: 105rpx; /* 超出部分被裁剪 */
}

/* 3. auto */
.auto-box {
  overflow: auto; /* H5 下溢出时出现滚动条 */
  height: 80rpx; /* 矮一点，更容易溢出 */
}
.long-content {
  height: 40rpx;
  line-height: 40rpx;
  border-bottom: 1rpx solid #eee;
}

/* 4. scroll */
.scroll-box {
  overflow: scroll; /* 始终显示滚动条（H5） */
  height: 100rpx;
}
.short-content {
  line-height: 50rpx;
  color: #666;
}
</style>

各值详解 + 使用场景

1. `overflow: visible`（默认）

✅ 用途：允许内容自然溢出（如 tooltip、下拉菜单）
❌ 不要用于：需要裁剪圆角、隐藏多余内容的场景

2. `overflow: hidden`

✅ 最常用！
用途：
- 实现 border-radius 圆角裁剪 ✅
- 清除浮动（旧方法）
- 隐藏超出的动画/过渡内容
❌ 不支持滚动

3. `overflow: auto`

✅ 推荐用于可滚动区域（如聊天窗口、列表）
行为：只在内容真正溢出时才显示滚动条（用户体验好）
⚠️ 在微信小程序中，view 不支持滚动，需改用 <scroll-view scroll-y="true">

4. `overflow: scroll`

⚠️ 谨慎使用
问题：即使内容没溢出，也显示滚动条（在 macOS 上可能不明显，但在 Windows 上很突兀）
适用场景：需要强制预留滚动条空间，避免布局跳动

uni-app 特别提醒

平台	`overflow` 支持情况
H5	✅ 完全支持 `visible` / `hidden` / `auto` / `scroll`
App（iOS/Android）	✅ 基本支持
微信小程序	❌ `view` 的 `overflow` 仅支持 `hidden` 和 `visible` ✅ 滚动必须用 `<scroll-view>`

`border-radius`

border-radius 是 CSS 中用来设置元素圆角的属性。

它可以让原本直角的盒子（如图片、按钮、卡片）变成圆角矩形、圆形、胶囊形等。

基本语法

border-radius: 20rpx;

数值单位常用：rpx（uni-app）、px、rem 等
值越大，圆角越“圆”

常见写法与效果对照表

写法	含义	视觉效果	适用场景	注意事项
`border-radius: 0;`	无圆角（默认）	⬜ 直角矩形	默认状态	可省略不写
`border-radius: 20rpx;`	四个角统一圆角	🟦 圆角矩形	卡片、按钮、Banner	最常用
`border-radius: 50%;`	宽高相等时为圆形宽高不等时为椭圆	🔴 圆形 🟠 椭圆	头像、图标	必须配合 `overflow: hidden`
`border-radius: 100rpx;`	固定像素大圆角	🥚 胶囊形（两端半圆）	按钮、标签	值 ≥ 宽度/2 时两端成半圆
`border-radius: 20rpx 80rpx;`	水平半径=20rpx，垂直半径=80rpx	🫧 椭圆角（上下扁、左右胖）	特殊设计	第一个值：水平方向第二个值：垂直方向
`border-radius: 10rpx 20rpx 30rpx 40rpx;`	按顺时针：左上 → 右上 → 右下 → 左下	🎭 四角不同圆角	自定义 UI	顺序：上左 → 上右 → 下右 → 下左
`border-top-left-radius: 30rpx;` `border-bottom-right-radius: 30rpx;`	单独设置某个角	🧩 仅指定角圆角	对话气泡、特殊布局	支持四个独立属性

百分比 vs 像素

50%：基于元素自身宽高计算
- 宽 = 高 → 圆形
- 宽 ≠ 高 → 椭圆
100rpx：固定像素，不受尺寸影响

/* 圆形头像 */
.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}

/* 胶囊按钮 */
.btn {
  width: 240rpx;
  height: 80rpx;
  border-radius: 40rpx; /* = 高度的一半 */
}

多值写法详解（顺时针顺序）

常用于“从顶部弹出的面板”或“带圆角的底部导航”

border-radius: A B C D;

位置	值
左上角	A
右上角	B
右下角	C
左下角	D

.card {
  border-radius: 0 0 30rpx 30rpx; /* 仅底部圆角 */
}

椭圆角写法（两个值）

每个角变成竖向拉长的椭圆

border-radius: 水平半径 / 垂直半径;

但更常见的是简写：

border-radius: 20rpx 80rpx; 
/* 等价于：
   border-radius: 20rpx 20rpx 20rpx 20rpx / 80rpx 80rpx 80rpx 80rpx;
*/

`overflow` 与 `border-radius`

.card-broken 只设置了 border-radius
但它的子元素（<image> 或 <view>）默认可以超出父容器边界
所以即使父容器“想变圆”，子元素仍是直角，视觉上圆角消失
而 .card-fixed 通过 overflow: hidden 强制裁剪子元素，只显示圆角内的部分

<template>
  <view class="container">
    <view class="demo-title">❌ 没有 overflow: hidden（圆角被撑破）</view>
    <view class="card-broken">
      <image class="img" src="/static/images/tmp_banner1.png" mode="aspectFill"></image>
    </view>

    <view class="demo-title">✅ 有 overflow: hidden（圆角生效）</view>
    <view class="card-fixed">
      <image class="img" src="/static/images/tmp_banner1.png" mode="aspectFill"></image>
    </view>
  </view>
</template>

<script>
export default {}
</script>

<style lang="scss">
.container {
  padding: 40rpx;
}

.demo-title {
  font-weight: bold;
  margin: 40rpx 0 20rpx;
  color: #333;
}

// ❌ 错误示范：只有 border-radius，没有 overflow
.card-broken {
  width: 600rpx;
  height: 300rpx;
  border-radius: 40rpx;        /* 设了圆角 */
  /* ❌ 缺少 overflow: hidden */
  border: 5rpx solid #000000;    /* 黑色边框，方便观察 */
  
}

// ✅ 正确示范：border-radius + overflow: hidden
.card-fixed {
  width: 600rpx;
  height: 300rpx;
  border-radius: 40rpx;        /* 圆角 */
  overflow: hidden;            /* 👈 关键！裁剪溢出内容 */
  border: 5rpx solid #000000;
  margin-top: 40rpx;
}

.img {
  width: 100%;
  height: 100%;
}
</style>