边框

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 36 课，共 76 课。

在 CSS 中，边框是环绕元素的一条线，用于将它与其他元素分隔开，并界定它的边界。

以下是使用 border 属性的基本语法：

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

border-width：边框的粗细，可以用像素（px）、em（em）或其他有效的 CSS 单位指定。你也可以使用 thin、medium 和 thick 等关键字。

border-style：边框的样式，可以是以下值之一：
- dotted：一系列点
- dashed：一系列短划线
- solid：实线
- double：两条实线

border-color：边框的颜色，可以使用颜色名称、十六进制值、RGB 值或 HSL 值指定。

你也可以使用简写形式，一次设置全部三个边框属性：

selector {
    border: width style color;
}

例如：

p {
    border: 2px solid blue;
}

在这个示例中，所有 <p>（段落）元素都有宽度为 2px 的蓝色实线边框。

挑战

简单

给你一个包含三个 <div> 元素的 HTML 文档，每个元素代表周五、周六或周日的电影放映安排。你的任务是使用 border 属性为它们添加样式。

为周五的放映安排设置 3px solid black 边框。
为周六的放映安排设置 4px dashed blue 边框。
为周日的放映安排设置 5px dotted green 边框。

亲手试试

<html>
<head>
    <title>Borders</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="friday">
        <h3>Friday</h3>
        <p>7:00 PM - The Inception</p>
    </div>
    <div class="saturday">
        <h3>Saturday</h3>
        <p>8:00 PM - The Matrix</p>
    </div>
    <div class="sunday">
        <h3>Sunday</h3>
        <p>9:00 PM - Interstellar</p>
    </div>
</body>
</html>