CSS fieldset

在HTML中，<fieldset> 元素用于将相关表单元素分组在一起，并且可以使用 <legend> 元素为 fieldset 元素添加标题。在CSS中，我们可以通过样式表自定义 fieldset 元素的外观，以使表单更加美观和易于阅读。

1. fieldset 基本样式

首先，让我们看一下如何基本样式化 fieldset 元素。我们可以设置 fieldset 的边框样式、边框圆角、背景颜色等。下面是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fieldset Example</title>
<style>
fieldset {
    border: 2px solid #333;
    border-radius: 10px;
    padding: 20px;
    background-color: #f9f9f9;
}
legend {
    font-weight: bold;
    color: #333;
}
</style>
</head>
<body>

<fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone"><br><br>
</fieldset>

</body>
</html>

在上面的示例中，我们定义了一个 fieldset 元素，并设置了边框样式、圆角、填充和背景颜色。同时，我们使用 <legend> 元素为 fieldset 添加了标题“Personal Information”。

运行以上代码，你将看到一个带有标题的 fieldset 和几个表单元素。fieldset 元素将这些表单元素分组在一起，并显示为一个矩形区域。

2. fieldset 边框样式

在 fieldset 中，我们可以控制边框的样式、颜色和宽度。下面是一个示例，演示了如何自定义 fieldset 的边框：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fieldset Border Example</title>
<style>
fieldset {
    border: 5px dashed #ff0000;
    border-radius: 10px;
    padding: 20px;
    background-color: #f9f9f9;
}
legend {
    font-weight: bold;
    color: #333;
}
</style>
</head>
<body>

<fieldset>
    <legend>Shipping Information</legend>
    <label for="address">Address:</label>
    <input type="text" id="address" name="address"><br><br>
    <label for="city">City:</label>
    <input type="text" id="city" name="city"><br><br>
    <label for="zip">Zip Code:</label>
    <input type="text" id="zip" name="zip"><br><br>
</fieldset>

</body>
</html>

在上面的示例中，我们将 fieldset 的边框样式设置为虚线边框，并将边框颜色设为红色。运行以上代码，你将看到一个带有红色虚线边框的 fieldset。

3. fieldset 边距和填充

我们还可以使用 CSS 控制 fieldset 的内边距和外边距，以及内容区域的填充。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fieldset Margin and Padding Example</title>
<style>
fieldset {
    border: 2px solid #333;
    border-radius: 10px;
    padding: 20px;
    margin: 20px;
    background-color: #f9f9f9;
}
legend {
    font-weight: bold;
    color: #333;
}
</style>
</head>
<body>

<fieldset>
    <legend>Payment Information</legend>
    <label for="card">Credit Card Number:</label>
    <input type="text" id="card" name="card"><br><br>
    <label for="expiry">Expiry Date:</label>
    <input type="text" id="expiry" name="expiry"><br><br>
    <label for="cvv">CVV:</label>
    <input type="text" id="cvv" name="cvv"><br><br>
</fieldset>

</body>
</html>

在上面的示例中，我们设置了 fieldset 的内边距、外边距和填充。运行代码，你将看到一个带有边距和填充的 fieldset。