css边框圆角border-radius如何使用

border-radius用于设置元素边框圆角，提升视觉效果。可使用px或%定义半径，支持统一设置或单独控制四角，如border-top-left-radius。简写语法支持1至4个值，分别对应不同角的半径。设为50%可将正方形变为圆形，长方形变为椭圆，广泛应用于按钮、图片等设计中。

在CSS中，border-radius 属性用来给元素的边框添加圆角效果。它可以让原本直角的盒子变得圆润，常用于按钮、图片、卡片等设计中，提升视觉体验。

基本语法

border-radius 可以接受一个或多个长度值或百分比，表示圆角的半径大小。单位常用 px（像素）或 %（百分比）。

最简单的写法：

div {
  border-radius: 10px;
}

这会让四个角都变成半径为10px的圆角。

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

设置不同角的圆角

你可以单独控制每个角的圆角大小，使用以下四种属性：

AI角色脑洞生成器

一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事

176

查看详情

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

例如：

div {
  border-top-left-radius: 20px;
  border-bottom-right-radius: 10px;
}

简写用法（多个值）

border-radius 支持1到4个值的简写方式，类似于 margin 或 padding：

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

制作圆形或椭圆

如果你想让一个正方形元素变成圆形，可以将 border-radius 设为宽度的一半或直接使用 50%：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

如果是长方形，50% 会生成椭圆效果。

基本上就这些。border-radius 使用简单，但能显著改善页面美观度，合理搭配能做出很多现代感十足的设计效果。不复杂但容易忽略细节。

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