边框样式（给元素"加边框"，区分页面模块）

8.1 边框三要素

边框宽度（border-width）

定义：设置边框的宽度。

语法：

css

元素 {
  border-width: 宽度值;
}

常用值：

thin：细边框
medium：中等边框（默认值）
thick：粗边框
像素值：1px、2px、5px等

示例：

css

.thin-border {
  border-width: 1px;
}

.thick-border {
  border-width: 5px;
}

边框样式（border-style）

定义：设置边框的样式。

语法：

css

元素 {
  border-style: 样式值;
}

常用值：

none：无边框
solid：实线（最常用）
dashed：虚线
dotted：点线
double：双实线
groove：3D凹槽
ridge：3D凸槽

示例：

css

.solid-border {
  border-style: solid;
}

.dashed-border {
  border-style: dashed;
}

边框颜色（border-color）

定义：设置边框的颜色。

语法：

css

元素 {
  border-color: 颜色值;
}

示例：

css

.red-border {
  border-color: red;
}

.blue-border {
  border-color: #3498db;
}

边框简写

定义：将边框的三个要素合并为一个简写属性。

语法：

css

元素 {
  border: 宽度 样式 颜色;
}

示例：

css

/* 简写形式 */
.box {
  border: 2px solid #333;
}

/* 等价于 */
.box {
  border-width: 2px;
  border-style: solid;
  border-color: #333;
}

8.2 单边框设置

定义

可以单独设置元素的上、下、左、右边框。

语法

css

/* 上边框 */
border-top: 宽度 样式 颜色;

/* 下边框 */
border-bottom: 宽度 样式 颜色;

/* 左边框 */
border-left: 宽度 样式 颜色;

/* 右边框 */
border-right: 宽度 样式 颜色;

示例

css

/* 只设置下边框 */
.underline {
  border-bottom: 2px solid #333;
}

/* 只设置左边框 */
.left-border {
  border-left: 4px solid #3498db;
  padding-left: 15px;
}

8.3 边框圆角（border-radius）

定义

设置元素边框的圆角效果。

语法

css

元素 {
  border-radius: 圆角值;
}

常用值

像素值：10px、20px等
百分比：50%（圆形）
四个值：左上右上右下左下

示例

css

/* 统一圆角 */
.rounded {
  border-radius: 10px;
}

/* 圆形 */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* 分别设置四个角的圆角 */
.custom-rounded {
  border-radius: 10px 20px 30px 40px;
}

8.4 边框阴影（box-shadow）

定义

给元素添加阴影效果，提升立体感。

语法

css

元素 {
  box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 颜色;
}

参数说明

水平偏移：正值向右，负值向左
垂直偏移：正值向下，负值向上
模糊半径：值越大越模糊
扩展半径：正值扩大，负值缩小
颜色：阴影颜色

示例

css

/* 基础阴影 */
.shadow {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* 内阴影 */
.inset-shadow {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

/* 多重阴影 */
.multi-shadow {
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.1),
    0 5px 15px rgba(0, 0, 0, 0.2);
}

8.5 新手避坑

边框塌陷问题

问题描述：当两个相邻元素都有边框时，边框会重叠，导致看起来比预期的粗。

解决方案：

使用 margin 分隔元素
使用 box-sizing: border-box 统一盒模型

圆角与阴影兼容性问题

注意事项：

旧版IE浏览器不支持 border-radius 和 box-shadow
需要添加浏览器前缀：-webkit-、-moz-

示例：

css

.compatible-rounded {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

8.6 实战：制作圆角按钮、带阴影的卡片

实战目标

创建圆角按钮和带阴影的卡片，展示边框样式的应用。

实战步骤

创建HTML文件：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS边框样式实战</title>
  <style>
    /* 在这里添加CSS样式 */
  </style>
</head>
<body>
  <div class="container">
    <h1>CSS边框样式实战</h1>
    
    <!-- 圆角按钮 -->
    <section class="buttons-section">
      <h2>圆角按钮</h2>
      <button class="btn btn-primary">主要按钮</button>
      <button class="btn btn-secondary">次要按钮</button>
      <button class="btn btn-outline">边框按钮</button>
      <button class="btn btn-rounded">圆形按钮</button>
    </section>
    
    <!-- 带阴影的卡片 -->
    <section class="cards-section">
      <h2>带阴影的卡片</h2>
      <div class="card">
        <h3>基础卡片</h3>
        <p>这是一个带阴影的基础卡片。</p>
      </div>
      <div class="card card-hover">
        <h3>悬停效果卡片</h3>
        <p>鼠标悬停时阴影会加深。</p>
      </div>
      <div class="card card-bordered">
        <h3>带边框卡片</h3>
        <p>这个卡片有左边框装饰。</p>
      </div>
    </section>
  </div>
</body>
</html>

添加CSS样式：

css

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 50px 20px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 40px;
}

h2 {
  color: #555;
  margin: 30px 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ddd;
}

/* 按钮样式 */
.buttons-section {
  margin-bottom: 40px;
}

.btn {
  padding: 12px 24px;
  margin: 10px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary {
  background-color: #3498db;
  color: white;
  box-shadow: 0 4px 6px rgba(52, 152, 219, 0.3);
}

.btn-primary:hover {
  background-color: #2980b9;
  box-shadow: 0 6px 8px rgba(52, 152, 219, 0.4);
}

.btn-secondary {
  background-color: #95a5a6;
  color: white;
}

.btn-secondary:hover {
  background-color: #7f8c8d;
}

.btn-outline {
  background-color: transparent;
  color: #3498db;
  border: 2px solid #3498db;
}

.btn-outline:hover {
  background-color: #3498db;
  color: white;
}

.btn-rounded {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #e74c3c;
  color: white;
  font-size: 14px;
  padding: 0;
}

.btn-rounded:hover {
  background-color: #c0392b;
  box-shadow: 0 4px 8px rgba(231, 76, 60, 0.4);
}

/* 卡片样式 */
.cards-section {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
  flex: 1;
  min-width: 200px;
  background-color: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
}

.card h3 {
  color: #333;
  margin-bottom: 10px;
}

.card p {
  color: #666;
  line-height: 1.5;
}

.card-hover:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-bordered {
  border-left: 4px solid #3498db;
  border-radius: 0 10px 10px 0;
}

运行页面：在浏览器中打开文件，观察效果

预期效果

圆角按钮：不同样式的按钮，包括实心、边框、圆形按钮
带阴影的卡片：基础卡片、悬停效果卡片、带边框装饰的卡片

边框样式（给元素"加边框"，区分页面模块） ​

8.1 边框三要素 ​

边框宽度（border-width） ​

边框样式（border-style） ​

边框颜色（border-color） ​

边框简写 ​

8.2 单边框设置 ​

定义 ​

语法 ​

示例 ​

8.3 边框圆角（border-radius） ​

定义 ​

语法 ​

常用值 ​

示例 ​

8.4 边框阴影（box-shadow） ​

定义 ​

语法 ​

参数说明 ​

示例 ​

8.5 新手避坑 ​

边框塌陷问题 ​

圆角与阴影兼容性问题 ​

8.6 实战：制作圆角按钮、带阴影的卡片 ​

实战目标 ​

实战步骤 ​

预期效果 ​

边框样式（给元素"加边框"，区分页面模块）

8.1 边框三要素

边框宽度（border-width）

边框样式（border-style）

边框颜色（border-color）

边框简写

8.2 单边框设置

定义

语法

示例

8.3 边框圆角（border-radius）

定义

语法

常用值

示例

8.4 边框阴影（box-shadow）

定义

语法

参数说明

示例

8.5 新手避坑

边框塌陷问题

圆角与阴影兼容性问题

8.6 实战：制作圆角按钮、带阴影的卡片

实战目标

实战步骤

预期效果