【技术专题】CSS3 网页技术 - CSS3 视觉增强

大家好，我是Java1234_小锋老师，最近更新 《一天学会 CSS3 视频教程(无废话版) 》专辑，感谢大家支持。

本课程主要介绍和讲解 CSS3简介，CSS3 入门，CSS3 选择器与优先级，CSS3 单位、颜色、字体 与文本，CSS3 盒模型 与基础样式，CSS3 布局基础，CSS3 布局进阶，CSS3 视觉 增强，CSS3 变换与动画，CSS3 函数与变量，CSS3 响应式 与移动端适配，CSS3 工程化与最佳实践。

视频教程+课件+源码 打包下载 ：

链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234

提取码：1234

CSS3（在第二阶段目录里）

CSS3 视觉增强

CSS3 视觉增强不是单一属性，而是一组"视觉效果/合成/遮罩"模块。它们能让页面少用图片和 JS，也能做出更灵活的 UI。下面按你列出的内容逐项介绍。

---

1. 圆角：border-radius

让盒子四个角变圆，也可做椭圆角。

.card {
  border-radius: 12px;
}

.avatar {
  border-radius: 50%;
}

.box {
  /* 左上 右上 右下 左下；斜杠后是垂直半径 */
  border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
}

要点：

• 一个值：四角相同。
• 四个值：左上、右上、右下、左下。
• / 前是水平半径，/ 后是垂直半径。
• 常用于卡片、头像、按钮、胶囊标签。

---

2. 阴影：box-shadow、text-shadow

box-shadow：盒子阴影

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

.inset-card {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

语法：

box-shadow: x偏移 y偏移 模糊半径 扩展半径 颜色 inset;

• 可写多个，用逗号分隔。
• 支持 inset 内阴影。
• 常用于卡片、按钮、悬浮层。

text-shadow：文字阴影

.title {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

语法：

text-shadow: x偏移 y偏移 模糊半径 颜色;

• 没有 spread 和 inset。
• 可叠加多个阴影做发光、描边感。

---

3. 渐变：linear-gradient、radial-gradient

渐变本质是 background-image，不是颜色。

线性渐变

.hero {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.bar {
  background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
}

方向可写：

• to right、to bottom、to top left
• 角度：45deg、135deg
• 0deg 指向顶部，90deg 指向右侧。

径向渐变

.glow {
  background: radial-gradient(circle at center, #fff, #000);
}

.spot {
  background: radial-gradient(ellipse at top, rgba(255,255,255,.8), transparent 70%);
}

可控制形状、位置、大小、颜色停靠点。

还有 repeating-linear-gradient()、repeating-radial-gradient() 做重复条纹。

---

4. 滤镜：filter

对元素进行模糊、亮度、对比度、灰度、投影等处理。

.img {
  filter: grayscale(1) blur(2px) brightness(1.1);
}

.logo {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
}

常用函数：

• blur(5px)
• brightness(1.2)
• contrast(150%)
• grayscale(1)
• hue-rotate(90deg)
• invert(1)
• opacity(0.5)
• saturate(2)
• sepia(1)
• drop-shadow(...)

注意：drop-shadow() 会跟随透明图片的轮廓，而 box-shadow 只跟随盒子。

---

5. 混合模式：mix-blend-mode、background-blend-mode

mix-blend-mode

让当前元素与背后的内容混合。

.overlay {
  mix-blend-mode: multiply;
}

常用于：

• 图片与背景色混合
• 文字与图片叠加
• 霓虹、叠加、正片叠底效果

常见值：

normal、multiply、screen、overlay、darken、lighten、difference、exclusion、hue、saturation、color、luminosity。

background-blend-mode

让同一个元素里的多个背景层之间混合。

.bg {
  background-image: url(photo.jpg), linear-gradient(45deg, #f00, #00f);
  background-blend-mode: overlay;
}

区别：

• mix-blend-mode：元素与背后内容混合。
• background-blend-mode：元素自己的多个背景之间混合。

可用 isolation: isolate 限制混合范围。

---

6. 裁剪：clip-path

裁剪元素的可见区域，元素仍占原布局空间。

.diamond {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.circle-img {
  clip-path: circle(50% at 50% 50%);
}

.inset-box {
  clip-path: inset(10px 20px 30px 40px round 10px);
}

常用形状：

• circle()
• ellipse()
• inset()
• polygon()
• path()
• url() 引用 SVG

可用于异形按钮、图片裁剪、动画变形。现代浏览器支持较好，旧版 Safari 可能需要 -webkit-clip-path。

---

7. 遮罩：mask

用图像或渐变控制元素哪些部分显示、哪些部分透明。

.mask {
  -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 61%);
  mask-image: radial-gradient(circle, #000 60%, transparent 61%);
  mask-size: cover;
  mask-position: center;
  mask-repeat: no-repeat;
}

常用子属性：

• mask-image
• mask-mode
• mask-repeat
• mask-position
• mask-size
• mask-composite

与 clip-path 区别：

• clip-path：硬裁剪，边缘通常锐利。
• mask：可用透明度/亮度做软过渡，能做渐隐、羽化、复杂遮罩。

兼容性上，很多场景仍要写 -webkit-mask-*。

---

8. 形状环绕：shape-outside

让浮动元素的外形影响周围文字环绕方式。

.float-shape {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50%);
  shape-margin: 12px;
}

要点：

• 必须配合 float 使用。
• 元素要有宽高。
• 常用值：circle()、ellipse()、inset()、polygon()、url()。
• shape-margin 控制文字与形状的间距。
• 常用于图文混排、杂志式排版。

---

9. 滚动行为：scroll-behavior

控制由导航或脚本触发的滚动是否平滑。

html {
  scroll-behavior: smooth;
}

.scroll-box {
  overflow-y: auto;
  scroll-behavior: smooth;
}

值：

• auto：默认，立即跳转。
• smooth：平滑滚动。

常用于锚点链接：

<a href="#section">跳转</a>
<section id="section">...</section>

注意：

• 主要影响锚点导航、scrollTo()、scrollIntoView() 等程序化滚动。

• 用户手动滚轮滚动通常不受影响。

• 可访问性上建议尊重减少动态效果：

  @media (prefers-reduced-motion: reduce) {
  html {
  scroll-behavior: auto;
  }
  }

10. 综合案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS3 视觉增强 · 综合实例</title>
<style>
/* ============================================================
   0. 基础与全局
   ============================================================ */
:root{
  --bg:#0e1120;
  --panel:#161b30;
  --panel-2:#1d2340;
  --text:#e9edfa;
  --muted:#98a2c4;
  --line:rgba(255,255,255,.09);
  --brand:#6c8cff;
  --brand2:#b06cff;
}

*{ box-sizing:border-box; }

/* ---------- 第 9 章：滚动行为（全局） ---------- */
html{
  scroll-behavior: smooth;        /* 锚点跳转平滑滚动 */
  scroll-padding-top: 92px;       /* 避开固定导航 */
}

body{
  margin:0;
  font-family: system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.75;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 8% -10%, rgba(108,140,255,.20), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(176,108,255,.18), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   1. 固定导航（混合模式 + 阴影 + 圆角）
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; flex-wrap:wrap; gap:4px; justify-content:center;
  padding:12px 16px;
  background:rgba(14,17,32,.72);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.nav a{
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  padding:6px 13px;
  border-radius:999px;                 /* 圆角胶囊 */
  transition:color .25s, background .25s, box-shadow .25s;
}
.nav a:hover{
  color:#fff;
  background:rgba(108,140,255,.18);
  box-shadow:
    0 0 0 1px rgba(108,140,255,.4),
    0 6px 18px rgba(108,140,255,.28);
}

/* ============================================================
   2. 布局容器
   ============================================================ */
.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:118px 20px 90px;
}

.section{
  margin-bottom:78px;
  scroll-margin-top:92px;
}
.section > h2{
  display:flex; align-items:center; gap:12px;
  font-size:21px; margin:0 0 6px;
  letter-spacing:.3px;
}
.num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  font-size:13px; font-weight:800; color:#fff;
  border-radius:12px;                                   /* 圆角 */
  background:linear-gradient(135deg,var(--brand),var(--brand2)); /* 渐变 */
  box-shadow:0 6px 18px rgba(108,140,255,.45);          /* 阴影 */
  flex:none;
}
.desc{
  color:var(--muted);
  font-size:14px;
  margin:0 0 22px;
}
code{
  font-family:ui-monospace,Consolas,Menlo,monospace;
  font-size:.9em;
  color:#ffd76c;
  background:rgba(255,255,255,.06);
  padding:1px 6px;
  border-radius:6px;
}

/* ============================================================
   Hero 头图（渐变 + 圆角 + 阴影 + 文字阴影 + 遮罩）
   ============================================================ */
.hero{
  position:relative;
  border-radius:26px;                                   /* 圆角 */
  padding:46px 38px;
  margin-bottom:70px;
  overflow:hidden;
  background:linear-gradient(135deg,#3b4b8f 0%,#6c8cff 40%,#b06cff 75%,#ff6c9c 100%); /* 线性渐变 */
  box-shadow:
    0 2px 8px rgba(0,0,0,.4),
    0 26px 60px rgba(108,140,255,.35),                  /* 盒阴影 */
    0 0 0 1px rgba(255,255,255,.08);
  /* 遮罩：底部柔和渐隐 */
  -webkit-mask-image:linear-gradient(to bottom,#000 82%,rgba(0,0,0,.85) 100%);
          mask-image:linear-gradient(to bottom,#000 82%,rgba(0,0,0,.85) 100%);
}
/* 径向渐变光斑 */
.hero::after{
  content:"";
  position:absolute;
  width:420px; height:420px;
  right:-120px; top:-160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);
  pointer-events:none;
}
.hero h1{
  margin:0 0 10px;
  font-size:clamp(26px,4.4vw,42px);
  line-height:1.25;
  letter-spacing:.5px;
  text-shadow:
    0 2px 4px rgba(0,0,0,.45),
    0 10px 30px rgba(0,0,0,.35);                        /* 文字阴影 */
}
.hero p{
  margin:0;
  max-width:560px;
  font-size:15px;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}

/* ============================================================
   第 1 章：圆角 border-radius
   ============================================================ */
.row{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; }

.rbox{
  width:112px; height:112px;
  display:grid; place-items:center;
  font-size:12px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,#3b4b8f,#6c8cff);
  border:1px solid rgba(255,255,255,.18);
}
.r-num  { border-radius:14px; }
.r-circle{ border-radius:50%; }
.r-pill{
  width:160px; height:50px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 8px 22px rgba(108,140,255,.42);
}
/* 椭圆角：斜杠前=水平半径，斜杠后=垂直半径 */
.r-ellipse{
  border-radius:60px 14px 60px 14px / 44px 14px 44px 14px;
}

/* ============================================================
   第 2 章：阴影 box-shadow / text-shadow
   ============================================================ */
.shadow-grid{ display:flex; flex-wrap:wrap; gap:24px; }
.shadow-card{
  width:196px; height:126px;
  border-radius:16px;
  display:grid; place-items:center;
  font-size:12.5px; color:var(--muted);
  background:var(--panel-2);
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.shadow-card.glow{
  box-shadow:0 14px 40px rgba(108,140,255,.5);
}
.shadow-card.inset{
  box-shadow:inset 0 4px 14px rgba(0,0,0,.8);
}
.shadow-card.multi{
  box-shadow:
    0 2px 6px rgba(0,0,0,.45),
    0 18px 42px rgba(176,108,255,.38),
    0 0 0 1px rgba(255,255,255,.07);
}

.neon{
  margin-top:34px;
  font-size:clamp(28px,5vw,46px);
  font-weight:800;
  letter-spacing:3px;
  color:#fff;
  text-shadow:
    0 0 6px #fff,
    0 0 18px #6c8cff,
    0 0 42px #6c8cff,
    0 0 76px #b06cff;
}

/* ============================================================
   第 3 章：渐变 linear-gradient / radial-gradient
   ============================================================ */
.grad-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
}
.grad{
  height:142px;
  border-radius:16px;
  border:1px solid var(--line);
  display:grid;
  place-items:end start;
  padding:14px;
  font-size:12.5px;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.g-linear { background:linear-gradient(135deg,#667eea,#764ba2); }
.g-tri    { background:linear-gradient(to right,#ff6b6b,#ffd93d,#6bcb77); }
.g-radial {
  background:radial-gradient(circle at 30% 30%, #ffffff, #6c8cff 42%, #1a1f35 78%);
}
.g-stripes{
  background:repeating-linear-gradient(45deg,#6c8cff 0 12px,#1a1f35 12px 24px);
}

/* ============================================================
   第 4 章：滤镜 filter
   ============================================================ */
.photo{
  background:
    radial-gradient(circle at 25% 25%, #ffd76c, transparent 45%),
    radial-gradient(circle at 78% 28%, #ff6c9c, transparent 50%),
    radial-gradient(circle at 40% 85%, #4ad9ff, transparent 55%),
    linear-gradient(140deg, #6c8cff, #b06cff 50%, #ff6c9c);
}
.filter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:16px;
}
.filter-item{ text-align:center; }
.filter-item .photo{
  height:128px;
  border-radius:14px;
  border:1px solid var(--line);
  transition:filter .35s ease, transform .35s ease;
}
.filter-item span{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  font-family:ui-monospace,Consolas,monospace;
}
.f-blur   { filter:blur(3px); }
.f-gray   { filter:grayscale(1) contrast(1.15); }
.f-bright { filter:brightness(1.45) saturate(1.7); }
.f-hue    { filter:hue-rotate(130deg); }
.f-sepia  { filter:sepia(.9) contrast(1.1); }
.f-invert { filter:invert(1) hue-rotate(180deg); }

/* ============================================================
   第 5 章：混合模式
   ============================================================ */
.blend-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:18px;
}
.blend-item{ margin:0; }
.blend-box{
  position:relative;
  height:150px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  isolation:isolate;          /* 把混合限制在卡片内部 */
}
.blend-box .base{
  position:absolute; inset:0;
  background:linear-gradient(135deg,#6c8cff,#b06cff);
}
.blend-box .over{
  position:absolute; inset:0;
  background:radial-gradient(circle at 35% 35%, #ff6b6b, #ffd93d 70%);
}
.bm-multiply  { mix-blend-mode:multiply; }
.bm-screen    { mix-blend-mode:screen; }
.bm-overlay   { mix-blend-mode:overlay; }
.bm-difference{ mix-blend-mode:difference; }

.blend-item figcaption{
  margin-top:9px;
  font-size:12px;
  color:var(--muted);
  font-family:ui-monospace,Consolas,monospace;
  text-align:center;
}

/* background-blend-mode：同一个元素的多个背景之间混合 */
.bg-blend{
  margin-top:20px;
  height:158px;
  border-radius:16px;
  border:1px solid var(--line);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.92) 0 10px, transparent 10px 20px),
    linear-gradient(135deg, #6c8cff, #b06cff);
  background-blend-mode:overlay;
  display:grid;
  place-items:end start;
  padding:14px;
  font-size:12.5px;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}

/* ============================================================
   第 6 章：裁剪 clip-path
   ============================================================ */
.clip-row{ display:flex; flex-wrap:wrap; gap:20px; }
.clip-item{ text-align:center; }
.clip{
  width:130px; height:130px;
  background:linear-gradient(135deg,#6c8cff,#b06cff);
  transition:transform .35s ease, background .35s ease;
}
.clip:hover{ transform:scale(1.08) rotate(-3deg); }

.c-circle { clip-path:circle(50% at 50% 50%); }
.c-diamond{ clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.c-hex    { clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.c-star   { clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%,
                              79% 91%, 50% 70%, 21% 91%, 32% 57%,
                              2% 35%, 39% 35%); }
.c-inset  { clip-path:inset(12% 16% 22% 10% round 18px); }

.clip-item span{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  font-family:ui-monospace,Consolas,monospace;
}

/* ============================================================
   第 7 章：遮罩 mask
   ============================================================ */
.mask-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px;
}
.mask-item{ margin:0; text-align:center; }
.mask-img{
  height:172px;
  border-radius:16px;
  border:1px solid var(--line);
}
/* ① 线性渐变遮罩：底部渐隐 */
.m-fade{
  -webkit-mask-image:linear-gradient(to bottom, #000 38%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 38%, transparent 100%);
}
/* ② 径向渐变遮罩：圆形聚焦 */
.m-circle{
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 42%, transparent 72%);
          mask-image:radial-gradient(circle at 50% 50%, #000 42%, transparent 72%);
}
/* ③ 重复渐变遮罩：条纹镂空 */
.m-stripes{
  -webkit-mask-image:repeating-linear-gradient(45deg, #000 0 9px, transparent 9px 18px);
          mask-image:repeating-linear-gradient(45deg, #000 0 9px, transparent 9px 18px);
}
.mask-item figcaption{
  margin-top:9px;
  font-size:12px;
  color:var(--muted);
  font-family:ui-monospace,Consolas,monospace;
}

/* ============================================================
   第 8 章：形状环绕 shape-outside
   ============================================================ */
.float-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px;
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.float-shape{
  float:left;
  width:172px; height:172px;
  margin:6px 20px 8px 0;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:13px; font-weight:700; color:#fff;
  background:radial-gradient(circle at 32% 30%, #fff6, transparent 55%),
             linear-gradient(135deg,#6c8cff,#b06cff);
  box-shadow:0 12px 30px rgba(108,140,255,.45);
  /* 关键：让文字按圆形轮廓环绕 */
  shape-outside:circle(50% at 50% 50%);
  shape-margin:14px;
}
.float-card p{
  margin:0 0 12px;
  font-size:14.5px;
  color:#d6dcf2;
}
.float-card p:last-child{ margin-bottom:0; }

/* 多边形环绕变体 */
.float-poly{
  float:left;
  width:170px; height:170px;
  margin:6px 20px 8px 0;
  background:linear-gradient(135deg,#ff6b6b,#ffd93d);
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  shape-outside:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  shape-margin:12px;
}
.mt{ margin-top:24px; }

/* ============================================================
   第 9 章：滚动行为 scroll-behavior
   ============================================================ */
.scroll-tabs{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:14px;
}
.scroll-tabs a{
  text-decoration:none;
  font-size:13px;
  color:#cbd4ef;
  padding:7px 16px;
  border-radius:999px;
  background:rgba(108,140,255,.14);
  border:1px solid rgba(108,140,255,.3);
  transition:.25s;
}
.scroll-tabs a:hover{
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 8px 22px rgba(108,140,255,.42);
}

.scroll-view{
  height:230px;
  overflow-y:auto;
  scroll-behavior:smooth;         /* 容器内部平滑滚动 */
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--panel);
  padding:18px;
  box-shadow:inset 0 2px 12px rgba(0,0,0,.5);
}
.pane{
  min-height:190px;
  border-radius:14px;
  padding:20px;
  margin-bottom:14px;
  font-size:14px;
  color:#fff;
  scroll-margin-top:14px;
}
.pane:nth-child(1){ background:linear-gradient(135deg,#6c8cff,#b06cff); }
.pane:nth-child(2){ background:linear-gradient(135deg,#ff6b6b,#ffd93d); color:#2a1a00; }
.pane:nth-child(3){ background:linear-gradient(135deg,#22c1c3,#3b4b8f); }
.pane h4{ margin:0 0 8px; font-size:16px; }

/* 回到顶部 */
.to-top{
  position:fixed;
  right:22px; bottom:24px;
  width:46px; height:46px;
  display:grid; place-items:center;
  font-size:18px;
  color:#fff;
  text-decoration:none;
  border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 10px 26px rgba(108,140,255,.5);
  transition:transform .25s, box-shadow .25s;
  z-index:90;
}
.to-top:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(108,140,255,.65);
}

/* 页脚 */
.footer{
  text-align:center;
  font-size:13px;
  color:var(--muted);
  padding:34px 0 0;
  border-top:1px solid var(--line);
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:640px){
  .wrap{ padding:104px 16px 70px; }
  .hero{ padding:34px 22px; }
  .float-shape, .float-poly{ width:132px; height:132px; }
}

/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce){
  html, .scroll-view{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; }
}
</style>
</head>

<body id="top">

<!-- ===================== 导航（第 9 章：平滑滚动） ===================== -->
<nav class="nav">
  <a href="#s1">① 圆角</a>
  <a href="#s2">② 阴影</a>
  <a href="#s3">③ 渐变</a>
  <a href="#s4">④ 滤镜</a>
  <a href="#s5">⑤ 混合</a>
  <a href="#s6">⑥ 裁剪</a>
  <a href="#s7">⑦ 遮罩</a>
  <a href="#s8">⑧ 环绕</a>
  <a href="#s9">⑨ 滚动</a>
</nav>

<main class="wrap">

  <!-- ============ Hero：渐变 + 圆角 + 阴影 + 文字阴影 + 遮罩 ============ -->
  <header class="hero">
    <h1>CSS3 视觉增强综合实例</h1>
    <p>圆角 · 阴影 · 渐变 · 滤镜 · 混合模式 · 裁剪 · 遮罩 · 形状环绕 · 平滑滚动<br>
       纯 CSS 实现，无需图片与 JavaScript。</p>
  </header>

  <!-- ============================================================
       ① 圆角
       ============================================================ -->
  <section class="section" id="s1">
    <h2><span class="num">01</span> 圆角 <code>border-radius</code></h2>
    <p class="desc">一个值四角相同；四个值依次为左上 / 右上 / 右下 / 左下；斜杠前是水平半径，斜杠后是垂直半径。</p>

    <div class="row">
      <div class="rbox r-num">14px</div>
      <div class="rbox r-circle">50%</div>
      <div class="rbox r-pill">胶囊 999px</div>
      <div class="rbox r-ellipse">椭圆角</div>
    </div>
  </section>

  <!-- ============================================================
       ② 阴影
       ============================================================ -->
  <section class="section" id="s2">
    <h2><span class="num">02</span> 阴影 <code>box-shadow</code> / <code>text-shadow</code></h2>
    <p class="desc"><code>box-shadow: x y 模糊 扩展 颜色 inset</code>；<code>text-shadow: x y 模糊 颜色</code>，两者都支持多层叠加。</p>

    <div class="shadow-grid">
      <div class="shadow-card">默认投影</div>
      <div class="shadow-card glow">彩色光晕</div>
      <div class="shadow-card inset">内阴影 inset</div>
      <div class="shadow-card multi">多层叠加</div>
    </div>

    <div class="neon">NEON</div>
  </section>

  <!-- ============================================================
       ③ 渐变
       ============================================================ -->
  <section class="section" id="s3">
    <h2><span class="num">03</span> 渐变 <code>linear-gradient</code> / <code>radial-gradient</code></h2>
    <p class="desc">渐变属于 <code>background-image</code>，可以用角度、方向、颜色停靠点精确控制。</p>

    <div class="grad-grid">
      <div class="grad g-linear">linear-gradient(135deg,...)</div>
      <div class="grad g-tri">linear-gradient(to right,...)</div>
      <div class="grad g-radial">radial-gradient(circle at 30% 30%,...)</div>
      <div class="grad g-stripes">repeating-linear-gradient(45deg,...)</div>
    </div>
  </section>

  <!-- ============================================================
       ④ 滤镜
       ============================================================ -->
  <section class="section" id="s4">
    <h2><span class="num">04</span> 滤镜 <code>filter</code></h2>
    <p class="desc">对元素整体做像素级处理，多个函数可串联，鼠标悬停可看原始效果。</p>

    <div class="filter-grid">
      <div class="filter-item">
        <div class="photo f-blur"></div><span>blur(3px)</span>
      </div>
      <div class="filter-item">
        <div class="photo f-gray"></div><span>grayscale(1)</span>
      </div>
      <div class="filter-item">
        <div class="photo f-bright"></div><span>brightness + saturate</span>
      </div>
      <div class="filter-item">
        <div class="photo f-hue"></div><span>hue-rotate(130deg)</span>
      </div>
      <div class="filter-item">
        <div class="photo f-sepia"></div><span>sepia(.9)</span>
      </div>
      <div class="filter-item">
        <div class="photo f-invert"></div><span>invert(1)</span>
      </div>
    </div>
  </section>

  <!-- ============================================================
       ⑤ 混合模式
       ============================================================ -->
  <section class="section" id="s5">
    <h2><span class="num">05</span> 混合模式 <code>mix-blend-mode</code> / <code>background-blend-mode</code></h2>
    <p class="desc">
      <code>mix-blend-mode</code> 让元素与背后内容混合（用 <code>isolation:isolate</code> 限定范围）；
      <code>background-blend-mode</code> 让同一个元素的多个背景层互相混合。
    </p>

    <div class="blend-grid">
      <figure class="blend-item">
        <div class="blend-box">
          <div class="base"></div>
          <div class="over bm-multiply"></div>
        </div>
        <figcaption>multiply</figcaption>
      </figure>

      <figure class="blend-item">
        <div class="blend-box">
          <div class="base"></div>
          <div class="over bm-screen"></div>
        </div>
        <figcaption>screen</figcaption>
      </figure>

      <figure class="blend-item">
        <div class="blend-box">
          <div class="base"></div>
          <div class="over bm-overlay"></div>
        </div>
        <figcaption>overlay</figcaption>
      </figure>

      <figure class="blend-item">
        <div class="blend-box">
          <div class="base"></div>
          <div class="over bm-difference"></div>
        </div>
        <figcaption>difference</figcaption>
      </figure>
    </div>

    <div class="bg-blend">background-blend-mode: overlay</div>
  </section>

  <!-- ============================================================
       ⑥ 裁剪
       ============================================================ -->
  <section class="section" id="s6">
    <h2><span class="num">06</span> 裁剪 <code>clip-path</code></h2>
    <p class="desc">硬裁剪出任意形状，元素仍占据原本的布局空间。鼠标悬停有过渡动画。</p>

    <div class="clip-row">
      <div class="clip-item">
        <div class="clip c-circle"></div><span>circle()</span>
      </div>
      <div class="clip-item">
        <div class="clip c-diamond"></div><span>polygon 菱形</span>
      </div>
      <div class="clip-item">
        <div class="clip c-hex"></div><span>polygon 六边形</span>
      </div>
      <div class="clip-item">
        <div class="clip c-star"></div><span>polygon 星形</span>
      </div>
      <div class="clip-item">
        <div class="clip c-inset"></div><span>inset() round</span>
      </div>
    </div>
  </section>

  <!-- ============================================================
       ⑦ 遮罩
       ============================================================ -->
  <section class="section" id="s7">
    <h2><span class="num">07</span> 遮罩 <code>mask</code></h2>
    <p class="desc">用渐变或图像控制透明度，能做出 <code>clip-path</code> 做不到的柔和羽化与镂空效果。</p>

    <div class="mask-grid">
      <figure class="mask-item">
        <div class="mask-img photo m-fade"></div>
        <figcaption>linear-gradient 渐隐</figcaption>
      </figure>

      <figure class="mask-item">
        <div class="mask-img photo m-circle"></div>
        <figcaption>radial-gradient 聚焦</figcaption>
      </figure>

      <figure class="mask-item">
        <div class="mask-img photo m-stripes"></div>
        <figcaption>repeating 条纹镂空</figcaption>
      </figure>
    </div>
  </section>

  <!-- ============================================================
       ⑧ 形状环绕
       ============================================================ -->
  <section class="section" id="s8">
    <h2><span class="num">08</span> 形状环绕 <code>shape-outside</code></h2>
    <p class="desc">必须配合 <code>float</code> 使用，元素需要明确宽高；<code>shape-margin</code> 控制文字与形状的间距。</p>

    <!-- 圆形环绕 -->
    <div class="float-card">
      <div class="float-shape">circle()</div>
      <p>这个浮动元素设置了 shape-outside: circle(50% at 50% 50%)，因此右侧的文字会沿着圆形轮廓自然环绕，而不是按矩形盒子排布。</p>
      <p>形状环绕是打造杂志式图文混排的利器。它不会改变元素本身的渲染外观------圆角仍然由 border-radius 负责，shape-outside 只影响周围内容的排布路径。</p>
      <p>配合 shape-margin 可以给文字和形状之间留出呼吸感，避免文字紧贴边缘。</p>
    </div>

    <!-- 多边形环绕 -->
    <div class="float-card mt">
      <div class="float-poly"></div>
      <p>这里用的是 polygon(50% 0, 100% 50%, 50% 100%, 0 50%)，也就是一个菱形。文字会贴着菱形的四条斜边排布，形成错落的视觉效果。</p>
      <p>shape-outside 支持与 clip-path 完全相同的形状函数：circle、ellipse、inset、polygon、path，以及 url() 引用的 SVG 图形。</p>
    </div>
  </section>

  <!-- ============================================================
       ⑨ 滚动行为
       ============================================================ -->
  <section class="section" id="s9">
    <h2><span class="num">09</span> 滚动行为 <code>scroll-behavior</code></h2>
    <p class="desc">
      页面根元素已设置 <code>scroll-behavior:smooth</code>，点击顶部导航即可看到平滑滚动。
      下面的滚动容器也设置了该属性，点击按钮可在容器内部平滑定位。
    </p>

    <div class="scroll-tabs">
      <a href="#pane-1">跳到区块 1</a>
      <a href="#pane-2">跳到区块 2</a>
      <a href="#pane-3">跳到区块 3</a>
    </div>

    <div class="scroll-view">
      <div class="pane" id="pane-1">
        <h4>区块 1</h4>
        <p>scroll-behavior: smooth 只影响由锚点链接、scrollTo()、scrollIntoView() 等触发的程序化滚动，用户手动滚轮滚动不受影响。</p>
        <p>可以用 scroll-padding-top 为固定导航预留空间，用 scroll-margin-top 为单个元素预留空间。</p>
      </div>

      <div class="pane" id="pane-2">
        <h4>区块 2</h4>
        <p>可访问性提示：如果用户开启了系统的「减少动态效果」，应当把 scroll-behavior 重置为 auto，避免造成不适。</p>
        <p>本示例已在 CSS 中通过 @media (prefers-reduced-motion: reduce) 做了处理。</p>
      </div>

      <div class="pane" id="pane-3">
        <h4>区块 3</h4>
        <p>到这里，9 个 CSS3 视觉增强特性就全部演示完毕：圆角、阴影、渐变、滤镜、混合模式、裁剪、遮罩、形状环绕、滚动行为。</p>
        <p>把它们组合起来，就能在不依赖图片和 JavaScript 的前提下，做出大量现代 UI 效果。</p>
      </div>
    </div>
  </section>

  <footer class="footer">
    CSS3 视觉增强综合实例 · 圆角 / 阴影 / 渐变 / 滤镜 / 混合模式 / 裁剪 / 遮罩 / 环绕 / 滚动
  </footer>

</main>

<a href="#top" class="to-top" title="回到顶部">↑</a>

</body>
</html>