css圆角边框通过border-radius属性实现，支持多种值和单位。1. 一个值时，所有角相同；2. 两个值时，左上与右下、右上与左下分别相同；3. 三个值时，左上、右上与左下、右下依次对应；4. 四个值时按左上、右上、右下、左下顺序设置；可使用像素、百分比、em/rem等单位，其中50%常用于创建圆形；通过斜杠分隔水平与垂直半径可创建椭圆；结合overflow: hidden可裁剪内容，box-shadow会跟随圆角形状；现代浏览器广泛支持border-radius，旧版本需添加-webkit-或-moz-前缀以兼容。
CSS圆角边框的设置，简单来说，就是使用border-radius属性。你可以给任何HTML元素添加圆角，让你的网页看起来更柔和、更现代。
直接使用border-radius属性。这个属性接受一个或多个值，用于定义边框的圆角半径。
如何使用border-radius设置不同角度的圆角？
border-radius属性可以接受一到四个值，每个值对应一个角。
立即学习“前端免费学习笔记（深入）”；
-
一个值: 所有四个角都使用相同半径。例如，
border-radius: 10px;会让所有角都变成10像素的圆角。 -
两个值: 第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。例如，
border-radius: 10px 20px;会让左上角和右下角是10像素，右上角和左下角是20像素。 -
三个值: 第一个值应用于左上角，第二个值应用于右上角和左下角，第三个值应用于右下角。例如，
border-radius: 10px 20px 30px;会让左上角是10像素，右上角和左下角是20像素，右下角是30像素。 -
四个值: 按照左上角、右上角、右下角、左下角的顺序应用。例如，
border-radius: 10px 20px 30px 40px;会让每个角的圆角半径都不同。
你还可以使用斜杠/分隔水平半径和垂直半径，创建椭圆形的圆角。例如，border-radius: 10px 20px / 5px 30px;。
border-radius可以使用哪些单位？
border-radius可以使用多种CSS单位，常见的有：
-
像素 (px): 绝对单位，指定固定的像素值。例如，
border-radius: 10px;。 -
百分比 (%): 相对于元素的宽度或高度。例如，
border-radius: 50%;通常用于创建圆形或椭圆形。 -
em 和 rem: 相对单位，分别相对于元素的字体大小和根元素的字体大小。例如，
border-radius: 0.5em;。
选择哪种单位取决于你的设计需求。像素提供了精确的控制，而百分比则可以创建响应式的圆角。
如何创建一个圆形或椭圆形？
要创建一个圆形，你需要确保元素的宽度和高度相等，并将border-radius设置为50%。
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}要创建一个椭圆形，你需要调整元素的宽度和高度，并使用斜杠/分隔水平半径和垂直半径。
.oval {
width: 200px;
height: 100px;
border-radius: 100px / 50px;
}这里的100px / 50px表示水平半径是100像素，垂直半径是50像素。
border-radius与其他CSS属性的交互
border-radius与其他CSS属性，如overflow和box-shadow，会产生一些有趣的交互。
-
overflow: hidden;: 如果你希望内容不超出圆角边框，可以使用overflow: hidden;。这会裁剪超出边框的内容，使其与圆角完美贴合。 -
box-shadow:box-shadow会跟随border-radius的形状。这意味着阴影也会有圆角，从而增强视觉效果。但有时候可能需要调整阴影的大小和位置，以达到最佳效果。
一个简单的例子：
.rounded-box {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
}浏览器兼容性问题
border-radius的浏览器兼容性非常好。几乎所有现代浏览器都支持它。但为了兼容旧版本的浏览器，你可能需要添加一些浏览器特定的前缀。不过，现在已经很少需要这样做了。
-
-webkit-border-radius: 用于旧版本的Safari和Chrome。 -
-moz-border-radius: 用于旧版本的Firefox。
虽然这些前缀现在已经过时，但在某些情况下，它们仍然可能有用。建议使用Autoprefixer等工具自动添加这些前缀，以确保最佳的兼容性。
总的来说，border-radius是一个非常强大且易于使用的CSS属性，可以为你的网页设计增加很多视觉吸引力。通过掌握不同的用法和单位，你可以创建各种各样的圆角效果，从而提升用户体验。
