使用 CSS Border-Radius 创建圆角 - 网页设计教程

介绍

在本实验中，参与者将探索强大的 CSS border-radius 属性，以在网页元素上创建视觉上吸引人的圆角。通过逐步的方法，学习者将从设置一个基本的 HTML 文档开始，逐步应用各种 border-radius 技术，以了解如何动态地操作元素的角。

实验涵盖了基本技能，例如创建统一的圆角、为各个角应用不同的半径，以及尝试 border-radius 的变化。通过实际示例的操作，学生将获得使用 CSS 将尖角 div 元素转换为平滑、圆润的设计组件的实践经验，从而增强网页界面的美观性。

设置 HTML 文档

在这一步中，你将设置一个基本的 HTML 文档，用于探索 CSS border-radius 属性。我们将创建一个简单的 HTML 文件，作为我们 CSS 样式实验的基础。

打开 WebIDE 并导航到 ~/project 目录。右键点击文件资源管理器并选择“新建文件”，创建一个名为 index.html 的文件。

将以下 HTML 结构复制并粘贴到 index.html 文件中：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Border-Radius Exploration</title>
    <style>
      /* We'll add our CSS styles here in the next steps */
    </style>
  </head>
  <body>
    <div class="container">
      <h1>CSS Border-Radius Examples</h1>
      <!-- We'll add our div elements here in the next steps -->
    </div>
  </body>
</html>

这个基本的 HTML 文档为我们的 CSS border-radius 探索提供了一个简单的结构。让我们分解一下关键组件：

<!DOCTYPE html> 声明确保浏览器使用最新的 HTML 标准
<meta> 标签帮助处理字符编码和响应式设计
我们包含了一个内部的 <style> 标签，后续步骤中将在此添加 CSS
<body> 中包含一个容器 div，我们将用它来展示示例

在浏览器中打开此文件时的示例输出：

CSS Border-Radius Examples

保存文件并确保它位于 ~/project/index.html。

为 Div 元素应用基本 Border-Radius

在这一步中，你将学习如何应用基本的 border-radius 属性来为 div 元素创建圆角。border-radius 属性可以让你轻松地为 HTML 元素创建平滑的圆角。

在 WebIDE 中打开 index.html 文件。在 <style> 标签内添加以下 CSS，以创建一个带有圆角的基本 div：

<style>
  .rounded-box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    border-radius: 20px;
    margin: 20px;
  }
</style>

现在，在 HTML 的 <body> 部分中添加一个带有 rounded-box 类的 div：

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="rounded-box"></div>
  </div>
</body>

让我们分解一下 CSS 属性：

width 和 height 设置 div 的大小
background-color 为 div 提供纯色背景
border-radius: 20px 创建一个半径为 20 像素的圆角
margin 为 div 添加一些外边距

当你在浏览器中打开这个 HTML 文件时，你会看到一个带有圆角的蓝色正方形。border-radius 属性为 div 的四个角应用了相同的曲线。

示例视觉效果：

+--------------------+
|                    |
|   Blue box with    |
|   rounded corners  |
|                    |
+--------------------+

尝试更改 border-radius 的值，观察它对圆角曲率的影响。可以尝试 10px、50px 甚至 100px 等值，看看不同的圆角效果。

创建具有不同圆角半径的 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）、百分比（%），甚至可以为水平和垂直半径设置不同的值。

探索单独圆角半径属性

在这一步中，你将更深入地了解单个圆角半径属性，并学习如何使用不同的单位和技术创建更复杂且精确的圆角。

在你的 index.html 文件中更新 <style> 部分，添加以下 CSS：

<style>
  .individual-radius {
    width: 300px;
    height: 200px;
    background-color: #e74c3c;
    margin: 20px;
  }

  .elliptical-corners {
    border-top-left-radius: 50px 25px;
    border-top-right-radius: 25px 50px;
    border-bottom-right-radius: 40px 20px;
    border-bottom-left-radius: 20px 40px;
  }

  .percentage-corners {
    border-top-left-radius: 30%;
    border-bottom-right-radius: 30%;
  }
</style>

在 HTML 的 <body> 部分中添加对应的 div：

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="individual-radius elliptical-corners"></div>
    <div class="individual-radius percentage-corners"></div>
  </div>
</body>

让我们探索新的 border-radius 技术：

椭圆角（Elliptical Corners）：
- 为每个角使用两个值：border-radius: 水平半径垂直半径
- 创建类似椭圆的曲线，而不是完美的圆形
- 示例：border-top-left-radius: 50px 25px 创建一个不对称的曲线
基于百分比的圆角（Percentage-based Corners）：
- 使用百分比创建响应式、比例化的圆角半径
- border-top-left-radius: 30% 根据元素的大小圆化角
- 非常适合创建自适应设计

示例视觉效果：

+--------------------+
|  Red boxes with   |
|  unique corner    |
|  roundings        |
+--------------------+

尝试更改半径值和单位，观察它们如何影响元素的外观。

尝试 Border-Radius 变体

在这最后一步中，你将探索高级的 border-radius 技术，使用 CSS 创建独特且富有创意的形状。我们将演示如何使用 border-radius 创建复杂的几何设计。

在你的 index.html 文件中更新 <style> 部分，添加以下 CSS：

<style>
  .creative-shapes {
    width: 250px;
    height: 250px;
    margin: 20px;
    background-color: #9b59b6;
  }

  .circle {
    border-radius: 50%;
  }

  .leaf-shape {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
  }

  .complex-shape {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
</style>

在 HTML 的 <body> 部分中添加对应的 div：

<body>
  <div class="container">
    <h1>CSS Border-Radius 创意形状</h1>
    <div class="creative-shapes circle"></div>
    <div class="creative-shapes leaf-shape"></div>
    <div class="creative-shapes complex-shape"></div>
  </div>
</body>

让我们探索这些创意的 border-radius 变化：

完美圆形（Perfect Circle）：
- 使用 border-radius: 50% 创建一个完美的圆形
- 通过使半径等于元素宽度/高度的一半来实现
叶子形状（Leaf-like Shape）：
- 选择性地圆化特定角以创建有机形状
- border-top-left-radius: 50% 创建一个弯曲的角
复杂不对称形状（Complex Asymmetrical Shape）：
- 使用高级语法 border-radius: 水平 / 垂直
- border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% 创建一个独特的不对称形状

示例视觉效果：

+--------------------+
|  Purple shapes    |
|  with creative    |
|  border-radius    |
+--------------------+

尝试更改百分比值，观察它们如何改变元素的形状。

总结

在本实验中，参与者通过逐步探索学习如何使用 CSS 的 border-radius 属性创建圆角。实验从一个带有内部样式标签的基本 HTML 文档开始，为 CSS 样式实验提供了基础。参与者首先创建一个简单的 HTML 结构，然后逐步将 border-radius 技术应用到 div 元素中。

学习过程包括应用基本的 border-radius 创建平滑的圆角，尝试不同的圆角半径，以及探索单个圆角半径属性。通过实践示例，参与者获得了使用 CSS 操作元素形状的实践经验，理解了 border-radius 如何通过简单直观的样式技术改变网页元素的视觉外观。