如何用css设置盒模型中的边框圆角border-radius

border-radius用于设置元素边框圆角，可接受1-4个值表示不同角落的半径，单位为px或%，如：一个值统一四角，两个值对角设置，三个值分别设置左上、右上左下、右下，四个值顺时针定义；也可单独使用border-top-left-radius等属性；支持斜杠分隔的双半径语法实现椭圆圆角，如20px/10px；常用技巧包括用50%创建圆形头像、为图片添加圆角并配合overflow:hidden防止溢出，提升界面视觉柔和度。

在CSS中，border-radius 属性用于设置盒模型中元素边框的圆角效果。通过它可以让矩形元素的四个角变得圆润，常用于按钮、图片、卡片等设计中。

基本语法

border-radius 是一个简写属性，可以同时设置四个角的圆角半径。它可以接受一个到四个值，表示不同角的圆角大小，单位常用 px 或 %。

例如：

• 一个值：四个角相同
  border-radius: 10px;
• 两个值：第一个为左上与右下，第二个为右上与左下
  border-radius: 10px 20px;
• 三个值：第一个为左上，第二个为右上和左下，第三个为右下
  border-radius: 10px 20px 30px;
• 四个值：顺时针顺序（左上、右上、右下、左下）
  border-radius: 10px 20px 30px 40px;

单独设置每个角

如果只想设置某个角的圆角，可以使用以下四个独立属性：

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

• border-top-left-radius：左上角
• border-top-right-radius：右上角
• border-bottom-right-radius：右下角
• border-bottom-left-radius：左下角

示例：

天工大模型

中国首个对标ChatGPT的双千亿级大语言模型

115

查看详情

椭圆圆角（支持两个半径）

border-radius 还支持设置水平和垂直两个半径，实现椭圆形圆角。语法用斜杠 / 分隔。

例如：

表示水平半径为20px，垂直半径为10px。也可以为每个角分别设置两个半径：

实用技巧

• 设置 border-radius: 50% 可将正方形元素变成圆形，常用于头像显示。
• 对图片使用 border-radius 可以让图片带圆角，需确保父容器或 img 标签本身设置了该属性。
• 配合 overflow: hidden 使用，可确保内容不溢出圆角区域。

基本上就这些。合理使用 border-radius 能显著提升界面的视觉柔和度和现代感。

以上就是如何用css设置盒模型中的边框圆角border-radius的详细内容，更多请关注php中文网其它相关文章！