CSS圆角边框设置全攻略

想让网页元素更美观？掌握CSS `border-radius`属性是关键！本文详细讲解了CSS设置边框圆角的各种方法，包括统一设置、分角设置、创建椭圆圆角以及单独控制每个角。通过`border-radius`属性，你可以轻松地为按钮、图片等元素添加圆角效果，让矩形元素瞬间变得生动活泼。文章还介绍了利用百分比制作圆形和胶囊形状的技巧。无论你是前端新手还是老手，都能通过本文快速掌握`border-radius`的用法，提升网页设计水平。快来学习如何利用CSS打造更具吸引力的用户界面吧！

border-radius属性可设置元素圆角，支持统一、分角、椭圆及单独控制，用于美化按钮、图片等。

设置元素边框圆角非常简单，使用 border-radius 属性即可。它可以让你的矩形元素变成带圆角的样式，适用于按钮、图片、卡片等常见场景。

基本语法

border-radius 可以接受一个或多个长度值或百分比，表示四个角的圆角半径大小。

示例：

.box {
  border-radius: 10px;
}

这会让元素的四个角都变成 10px 的圆角。

分别设置四个角

你也可以为每个角单独设置不同的圆角大小，按顺时针顺序：左上、右上、右下、左下。

示例：

.box {
  border-radius: 10px 5px 20px 8px;
}

• 左上角：10px
• 右上角：5px
• 右下角：20px
• 左下角：8px

水平和垂直半径（椭圆圆角）

如果想创建椭圆形的圆角，可以用斜杠 / 分隔横向和纵向半径。

示例：

.box {
  border-radius: 20px / 10px;
}

表示所有角的水平半径为 20px，垂直半径为 10px。

单独控制某一个角

CSS 还提供了四个子属性，用于单独设置每个角：

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

示例：

.circle-img {
  border-top-left-radius: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 5px;
}

制作圆形或胶囊形状

想让一个正方形元素变成圆形？把 border-radius 设为 50% 即可。

示例：

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

如果是长方形元素，设为 50% 会变成胶囊形状：

.capsule {
  padding: 10px 20px;
  border-radius: 50px;
}

今天关于《CSS圆角边框设置全攻略》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！