一、background（背景）
概念：
background 设置元素背景，可以拆分为多个子属性学习：background-color — 背景色background-image — 背景图background-size — 背景尺寸background-position — 背景位置background-repeat — 背景重复
👇 背景色演示
👇 背景图（cover vs contain）
cover（覆盖）
contain（包含）
1/* 背景色 */
2background-color: #3498db;
3
4/* 背景图 */
5background-image: url('image.jpg');
6
7/* 背景尺寸 */
8background-size: cover; /* 覆盖整个容器 */
9background-size: contain; /* 完整显示 */
10
11/* 背景位置 */
12background-position: center;
13background-position: top right;
14
15/* 背景重复 */
16background-repeat: no-repeat;
17
18/* 简写 */
19background: #3498db url('image.jpg') center/cover no-repeat;
二、box-shadow（盒阴影）
概念：
语法：
box-shadow 给元素添加阴影效果。语法：
box-shadow: x偏移 y偏移 模糊半径 颜色;
👇 不同阴影效果
基础阴影
发光效果
浮起效果
内阴影
1/* 基础阴影 */
2box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
3
4/* 发光效果 */
5box-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
6
7/* 浮起效果 */
8box-shadow: 0 10px 30px rgba(0,0,0,0.2);
9
10/* 内阴影 */
11box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
12
13/* 多重阴影 */
14box-shadow: 0 2px 4px rgba(0,0,0,0.1),
15 0 8px 16px rgba(0,0,0,0.1);
三、opacity（透明度）
概念：
注意：opacity 会影响所有子元素。
opacity 设置元素的透明度，值从 0（完全透明）到 1（完全不透明）。注意：opacity 会影响所有子元素。
👇 不同透明度
1.0
0.8
0.5
0.2
1/* 完全不透明（默认） */
2opacity: 1;
3
4/* 半透明 */
5opacity: 0.5;
6
7/* 完全透明 */
8opacity: 0;
9
10/* 对比：rgba 只影响背景，不影响文字 */
11background: rgba(52, 152, 219, 0.5); /* 只有背景半透明 */
12opacity: 0.5; /* 整个元素（包括文字）半透明 */
四、cursor（鼠标样式）
概念：
常用值：
cursor 设置鼠标悬停时的光标样式。常用值：
default、pointer、text、move、not-allowed
👇 不同鼠标样式（悬停查看）
default
pointer
text
move
not-allowed
1/* 默认箭头 */
2cursor: default;
3
4/* 手型（链接/按钮） */
5cursor: pointer;
6
7/* 文本选择 */
8cursor: text;
9
10/* 移动 */
11cursor: move;
12
13/* 禁止 */
14cursor: not-allowed;
15
16/* 等待 */
17cursor: wait;
18
19/* 自定义图片 */
20cursor: url('custom.cur'), auto;
五、border-radius（圆角）
概念：
圆形：设置
border-radius 设置元素的圆角。圆形：设置
border-radius: 50% 可以变成圆形。
👇 不同圆角效果
10px
20px
50%
胶囊形
1/* 四角相同 */
2border-radius: 10px;
3
4/* 圆形（正方形元素） */
5border-radius: 50%;
6
7/* 胶囊形（长方形元素） */
8border-radius: 30px;
9
10/* 单独设置四角 */
11border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */