创建具有不同圆角半径的 Div
在这一步中,你将学习如何创建具有不同圆角半径的 div
,从而让你能够更灵活地控制每个角的圆角效果。border-radius
属性可以用来创建独特且有趣的形状。
在你的 index.html
文件中更新 <style>
部分,添加以下 CSS:
<style>
.different-corners {
width: 250px;
height: 200px;
background-color: #2ecc71;
margin: 20px;
}
.top-left-corner {
border-top-left-radius: 50px;
}
.bottom-right-corner {
border-bottom-right-radius: 30px;
}
.mixed-corners {
border-top-left-radius: 40px;
border-bottom-right-radius: 20px;
border-top-right-radius: 10px;
border-bottom-left-radius: 60px;
}
</style>
现在,在 HTML 的 <body>
部分中添加对应的 div
:
<body>
<div class="container">
<h1>CSS Border-Radius Examples</h1>
<div class="rounded-box"></div>
<div class="different-corners top-left-corner"></div>
<div class="different-corners bottom-right-corner"></div>
<div class="different-corners mixed-corners"></div>
</div>
</body>
让我们分解一下不同的 border-radius
应用:
border-top-left-radius: 50px
仅圆化左上角
border-bottom-right-radius: 30px
仅圆化右下角
mixed-corners
的 div
展示了如何为每个角独立设置不同的半径
示例视觉效果:
+--------------------+
| Green box with |
| varied corner |
| roundings |
+--------------------+
尝试更改像素值,观察不同的圆角半径如何创建独特的形状。你可以使用各种单位,例如像素(px)、百分比(%),甚至可以为水平和垂直半径设置不同的值。