如何用css border-radius控制圆角效果

border-radius可创建圆角、圆形或椭圆效果，通过单值统一设置或分别指定四个角，支持斜线语法定义水平和垂直半径，常用于按钮、头像等元素，提升界面视觉柔和度。

使用 CSS 的 border-radius 属性可以轻松实现元素的圆角效果。它允许你将矩形边框的直角变为圆角，甚至创建圆形或椭圆形状。

基本语法与单值设置

border-radius 是一个简写属性，可以同时设置四个角的圆角半径。当你只提供一个值时，四个角都会应用相同的圆角大小。

• border-radius: 10px; —— 所有角都是 10 像素的圆角
• border-radius: 50%; —— 元素变成圆形（前提是宽高相等）

分别控制四个角

你可以为每个角指定不同的值，顺序是：左上、右上、右下、左下（顺时针方向）。

• border-radius: 10px 5px 20px 8px; —— 四个角各不相同

也可以使用具体属性单独设置某个角：

立即学习“前端免费学习笔记（深入）”；

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

• border-top-left-radius: 15px;
• border-top-right-radius: 10px;
• border-bottom-right-radius: 5px;
• border-bottom-left-radius: 0;

创建椭圆或胶囊形状

当需要水平和垂直方向有不同的圆角半径时，可以用斜线 / 分隔 X 轴和 Y 轴的半径，形成椭圆角。

• border-radius: 20px / 10px; —— 水平半径 20px，垂直 10px
• border-radius: 50% / 50%; —— 等同于圆形（适合头像、图标）

如果元素宽度较小而高度较高，border-radius: 50% 可以生成胶囊形状。

实用技巧与注意事项

在实际使用中，注意以下几点能避免常见问题：

• 圆角值不能为负数
• 百分比值是相对于元素自身的宽高计算的
• 如果圆角过大（比如超过元素尺寸的一半），浏览器会自动调整以防止重叠
• 圆角会影响背景、边框和阴影的渲染范围，默认情况下都遵循圆角轮廓

基本上就这些。合理使用 border-radius 能让界面更柔和自然，从按钮到卡片布局都很常用。不复杂但容易忽略细节。

以上就是如何用css border-radius控制圆角效果的详细内容，更多请关注php中文网其它相关文章！