边框圆角
本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 40 课，共 76 课。
在 CSS 中，border-radius 属性用于为元素创建圆角。此属性允许你指定每个角的曲率半径，从而控制元素边框的形状。 以下是使用 border-radius 属性的基本语法：
selector {
border-radius: value;
}value：圆角所需的半径，可以用像素（px）、em（em）、百分比（%）或其他有效的 CSS 单位指定。
- 你可以指定一个值，让四个角都使用相同的圆角半径。在下面的示例中，所有
<div>元素的圆角半径都是10px。
div {
border-radius: 10px;
}- 你可以按以下顺序分别设置每个角的值：左上、右上、右下、左下。
.button {
border-radius: 10px 20px 30px 40px;
}- 你也可以只指定两个值，第一个值会应用于左上角和右下角，第二个值会应用于右上角和左下角。
img {
border-radius: 20px 50px;
}
挑战
简单给定一个包含两个 <div> 元素的 HTML 文档，它们的类分别是 "one" 和 "two"。按照以下步骤操作：
- 使用类选择器编写 CSS 规则，选中所有类为 “one” 的元素。将边框设为 3px solid #4287f5，并将 border-radius 设为 15px，让所有角都呈现相同的圆角形状。
- 使用类选择器编写 CSS 规则，选中所有类为 “two” 的元素。根据你的选择，将边框设为任意值，并将 border-radius 设为任意值。
亲手试试
<html>
<head>
<title>Border Radius</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<div class="one">This is a division with rounded corners.</div>
<div class="two">This is another division with rounded corners.</div>
</body>
</html>
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
使用 CSS 添加样式中的所有课
自己练习： Web 在线编辑器