HTML5提供了一种通过CSS来实现圆角效果的方式，可以使用border-radius属性来设置元素的圆角

原创已于 2024-03-05 17:03:20 修改 · 384 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3 #html5 #js

于 2020-06-30 09:11:18 首次发布

Javascript(Promise/asyncAwait) 同时被 3 个专栏收录

377 篇文章

订阅专栏

HTML5(HyperText Markup)

305 篇文章

订阅专栏

CSS(Cascading Style Sheets)

231 篇文章

订阅专栏

本文深入讲解CSS border-radius属性，展示如何使用它为HTML元素创建圆角效果，包括为每个角设置不同圆角、使用百分比和斜杠进行高级定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在HTML5中，我们可以使用CSS的border-radius属性来为HTML元素设置圆角效果。border-radius属性可以单独为元素的每一个角设置圆角，也可以同时为所有角设置相同的圆角。
以下是一些基本的示例：

为所有角设置相同的圆角：

div {
    border-radius: 10px;
}

这将使得div元素的所有角都有10像素的圆角。
2. 为每个角分别设置圆角：

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

在这个示例中，我们为div元素的每个角分别设置了不同的圆角。
3. 使用斜杠/来同时设置水平和垂直方向的圆角：

div {
    border-radius: 10px 20px 30px 40px;
}

在这个示例中，我们按照顺时针方向（左上角，右上角，右下角，左下角）为div元素的每个角设置了不同的圆角。
这些示例都使用了像素(px)作为单位，但你也可以使用其他CSS支持的长度单位，如em，rem，%等。
需要注意的是，border-radius属性在较旧的浏览器中可能不被支持。因此，如果你需要在这些浏览器中实现圆角效果，可能需要使用一些CSS的hack技术，或者使用一些JavaScript库，如jQuery的圆角插件等。当然，我很乐意帮助你继续探讨border-radius属性以及它在CSS中的应用。

`border-radius`的更多用法和技巧

百分比值：
当使用百分比值时，border-radius是相对于元素自身宽度和高度的。例如，50%的border-radius会创建一个完全的半圆。
```
div {
    border-radius: 50%;
}
```
这通常用于创建圆形或椭圆形的元素，尤其是当元素的宽度和高度相等时。
单个值：
如果border-radius只设置一个值，那么这个值会应用于所有四个角。
```
div {
    border-radius: 10%;
}
```
这将使得div元素的所有角都有相对于元素宽度和高度的10%的圆角。
斜杠分隔的多个值：
使用斜杠分隔的多个值，你可以为水平和垂直方向分别设置圆角。
```
div {
    border-radius: 10% 20% / 30% 40%;
}
```
这将会把左上角的水平圆角设为10%，垂直圆角设为30%；右上角的水平圆角设为20%，垂直圆角设为40%；左下角和右下角以此类推。
继承：
border-radius属性是可以继承的，这意味着如果父元素设置了圆角，子元素也会继承这个圆角，除非子元素自己设置了不同的圆角值。
浏览器兼容性：
虽然现代浏览器都支持border-radius属性，但在一些较旧的浏览器中可能需要添加供应商前缀来保证兼容性。例如：
```
div {
    -webkit-border-radius: 10px; /* Safari 和 Chrome */
    -moz-border-radius: 10px; /* Firefox */
    border-radius: 10px; /* 标准语法 */
}
```
不过，随着浏览器的更新，这些前缀大多已经不再需要。
背景裁剪：
当元素有背景图片或背景色，并且设置了border-radius时，背景会正确地被裁剪以适应圆角。
与overflow属性配合：
如果元素有overflow属性（如overflow: hidden;），并且设置了border-radius，那么超出元素边界的内容会被裁剪，从而显示圆角效果。
总之，border-radius属性提供了强大而灵活的工具来创建具有吸引力和现代感的网页设计。通过掌握它的各种用法和技巧，你可以实现很多美观和用户友好的界面设计。
HTML5提供了一种通过CSS来实现圆角效果的方式，可以使用border-radius属性来设置元素的圆角。border-radius属性可以接受一个或多个值，用于指定四个角的圆角半径。

如果要设置两组不同半径的圆角，可以使用以下方式：

设置四个角的圆角半径分别为不同的值：

<div style="border-radius: 10px 20px 30px 40px;"></div>

上述代码中，第一个值10px表示左上角的圆角半径，第二个值20px表示右上角的圆角半径，第三个值30px表示右下角的圆角半径，第四个值40px表示左下角的圆角半径。

设置两个相邻角的圆角半径为相同的值，另外两个相邻角的圆角半径为另一个值：

<div style="border-radius: 10px 20px 10px 20px;"></div>

上述代码中，第一个值10px和第三个值10px表示左上角和右下角的圆角半径，第二个值20px和第四个值20px表示右上角和左下角的圆角半径。

按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略
bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>两组半径的圆角</title>
<style type="text/css">
div {
	width:200px;
	height:80px;
	background-color:#fe0;
	border: 10px solid #f90;         /* 宽度为10px的边框 */
	border-radius:20px/40px;         /* 斜线间隔的两组半径 */
	border-radius:20px 30px 40px 50px/30px 40px 10px 0;
}
</style>
<body>
<div></div>
</body>
</html>