这门课解决什么问题

很多前端开发者写页面时，遇到稍微复杂一点的视觉需求，第一反应是找现成组件库或者让设计师切图。但实际工作里，产品改版频繁，总不能每次调整圆角、进度条、气泡提示都重新换图。这门实战技巧课解决的正是“脱离第三方库，用纯代码还原设计稿”的问题。资料里的案例集中在高频出现的界面细节，比如带圆角的选项卡、花式边框、步骤指示器、语音气泡。这些内容平时散落在各个项目里，遇到一次查一次，很难形成自己的方法论。这套资料把零散的技巧归拢成体系，帮你在面对复杂页面还原时，不用再到处翻文档拼凑代码。

适合什么基础与建议先看哪几块

这套资料不适合完全零基础的人，它默认你已经掌握盒模型、浮动、定位等基础概念，能独立写静态页面。如果你还在纠结标签语义或者基础语法，建议先补完入门内容再来看。对于有一定页面开发经验，但每次实现特殊形状都要靠搜索引擎的人，这套资料刚好能帮你补齐细节。建议先从界面交互组件看起，比如自定义下拉选择框、自定义范围滑块和进度条，这些是日常业务里出现频率最高的场景。看完这几个案例，能直接套用到当前项目的表单优化里。接着再看花式边框和多边框效果，这部分对处理卡片类布局的视觉升级很有帮助。图形绘制部分比如三角形、正多边形和心形，可以穿插在日常练习里，主要用来理解边框合并和裁切原理，不用死记公式。

学完能独立做什么与资料怎么配合练习

学完这套资料，你拿到一份复杂的设计稿，能直接用代码画出各种异形结构和交互控件，不再依赖切图或者第三方库。比如产品要求做一个带有内弧圆角的选项卡，或者带渐变边框的提示框，你能马上想到对应的实现方式，并且能根据主题色灵活调整。练习时不要只看视频或文档，建议准备一个空白页面，跟着资料里的案例把每个形状敲一遍，然后尝试修改参数。比如把三角形的边框宽度改大，看看图形怎么变化；把进度条的渐变色换掉，测试兼容性。每学完一个模块，挑两三个案例组合起来，做一个完整的卡片或者导航条，把静态的形状变成实际可用的组件，这样才算真正消化了这些技巧。


从实战技巧开始：上百技巧、千种案例，轻松应对复杂场景

课程目录

*   现代 CSS 创建形状指南

*   CSS 图形：绘制三角形

*   CSS 图形：创建正多边形和星爆形状

*   CSS 图形：创建心形

*   CSS 图形：创建丝带效果

*   CSS 图形：切割元素角落

*   CSS 图形：创建花式边框效果（Part1）

*   CSS 图形：创建花式边框效果（Part2）

*   CSS 图形：带圆角的形状

*   CSS 图形: 自定义虚线

*   CSS 图形: 创建面包屑导航

*   CSS 图形：创建步骤指示器

*   CSS 图形：创建进度条

*   CSS 图形：创建自定义范围滑块

*   CSS 图形：创建工具提示和语音气泡

*   CSS 图形：创建分隔符

*   CSS 图形：创建内弧圆角选项卡

*   CSS 图形：自定义选择控件

*   CSS 图形：自定义下拉选择框

*   CSS 图形：创建多边框效果

*   CSS 图形：创建渐变边框

*   CSS 图形：创建内中外边框

*   CSS 图形：创建渐变阴影和发光效果

*   CSS 图形: 创建突破元素（Breakout Element）

*   CSS 图形：创建镂空头像

*   CSS 图形：创建用户头像堆叠

*   CSS 图形：用CSS锚定位绘制连接元素的线

*   CSS 图形: CSS 渐变技巧

*   CSS 图形：创建弧形与圆角边缘形状

*   CSS 图形：创建内凹曲线形状

*   CSS 图形：使用图片边框创建形状的技巧

*   CSS 图形: 使用三角函数改进 CSS 形状

*   CSS 布局：隐式网格和自动放置

*   CSS 布局：网格区域

*   CSS 布局: CSS 的 gap

*   CSS 布局：减少使用绝对定位的技巧

*   CSS 布局：构建不规则网格布局（Part1）

*   CSS 布局：构建不规则网格布局（Part2）

*   CSS 布局：构建不规则网格布局（Part3）

*   CSS 布局：构建不规则网格布局（Part4）

*   CSS 布局：构建不规则网格布局（Part5）

*   CSS 布局：水平居中

*   CSS 布局：使用最小宽高的小技巧

*   CSS 布局：创建全屏布局

*   CSS 布局：处理宽高比变化

*   CSS 布局：将元素浮动到底部角落

*   CSS 布局：防止锚点链接滚动到固定或粘性头部后面

*   CSS 布局：创建完美的 Logo 展示

*   CSS 布局：使用现代 CSS重构评论组件

*   CSS 布局：CSS 与 Popover API 的结合

*   CSS 布局：HTML 和 CSS 下拉菜单的真相

*   CSS 布局：创建手风琴组件

*   CSS 布局：切换内容的现代方式

*   CSS 布局：创建响应式表格

*   CSS 布局：重聊 CSS 锚点定位

*   CSS 布局：创建熔岩导航菜单

*   CSS 布局：CSS 中的各种 *-box

*   CSS 排版：CSS的 cap 单位

*   CSS 排版：利用 field-sizing 属性实现自动尺寸调整

*   CSS 排版：美化多语言网站技巧

*   CSS 排版：圆形文本

*   CSS 排版：如何使文本适应容器宽度

*   CSS 排版：上标与下标

*   CSS 排版：颜色和对比度

*   CSS 排版：CSS 实现文本淡化效果的不同姿势

*   CSS 排版：Web 排版技巧

*   CSS 排版：margin-trim 最佳实践

*   CSS 排版：CSS 中的文本均衡 text-wrap

*   Web UI：驾驭高级CSS选择器

*   Web UI：使用 :has() 增强页面交互效果（Part1）

*   Web UI：使用 :has() 增强页面交互效果（Part2）

*   Web UI：根据控件状态调整 UI 效果

*   Web UI：使用相对颜色创建主题

*   Web UI：暗黑模式新的切换姿势 light-dark()

*   Web UI：CSS 视图过渡之主题切换

*   Web UI：你所不知道的 color-mix()

*   Web UI：设置颜色透明度的多种姿势

*   Web UI：CSS 实现多行文本装饰

*   Web UI：创建渐变文字与投影效果

*   Web UI：制作磨砂玻璃效果

*   Web UI：创建渐进式模糊效果

*   Web UI：创建模糊边框效果

*   Web UI：创建渐进式灰度效果

*   Web UI：创建半色调效果

*   Web UI：创建模糊阴影

*   Web UI：创建连续动态渐变

*   Web UI：交替样式查询

*   Web UI：循环切换与空间切换

*   Web UI：分层切换：可选的CSS混合

*   Web UI：CSS 中的真假切换

*   Web UI：CSS 中的数学函数与常量

*   Web UI：CSS attr() 的新特性

*   Web UI：CSS 树计数函数：sibling-count() 和 sibling-index()

*   Web UI：你所不知道的 min() 函数

*   Web UI：CSS calc-size() 函数与内在尺寸

*   Web UI：添加和删除徽标

*   Web UI：你需要的是 @property

*   Web UI：创建数字密码输入框

*   Web UI：创建返回顶部按钮

*   Web UI：用于按钮上的小技巧

*   Web UI：创建拆分效果

*   Web UI：创建磁性悬停效果

*   Web UI： 创建计时器

*   Web UI：悬停显示密码

*   Web UI：奇妙的图像装饰效果

*   Web UI：制作 3D 图像效果

*   Web UI：制作 3D 视差效果

*   Web UI：给产品图片换色

*   Web UI：CSS 如何穿透 SVG 的 use

*   Web UI：给图像添加碎片效果

*   Web UI：你所不知道的 pointer-events

*   Web UI：替代 !important 的新姿势

*   Web UI：CSS 中的新值和新函数

*   Web 动效：边框动画

*   Web 动效：创建水波纹文本动画

*   Web 动效：无限滚动

*   Web 动效：跑马灯效果

*   Web 动效：故障悬停效果

*   Web 动效：制作旋转木马效果

*   Web 动效：创建 Loading 动效

*   Web 动效：淡入淡出过渡动效

*   Web 动效：创建数字翻滚动效

*   Web 动效：文本显示动效

*   Web 动效：创建带有方向感知的交互按钮

*   Web 动效：奇妙的悬停效果

*   Web 动效：给auto 添加过渡动效

*   Web 动效：使用display和size属性简化CSS动画

*   Web 动效：混合单位之速度与持续时间

*   Web 动效：使用三角函数创建平滑的交错过渡延迟

*   Web 动效：使用 transition-dealy 创建悬停效果

*   Web 动效：模拟动画重复延迟

*   Web 动效：控制旋转动效：加速、减速和停止

*   Web 动效：动画与 clip-path

*   Web 动效：CSS 视图过渡之模态框动画

*   Web 动效：CSS 视图过渡之没有框架的单页应用

*   Web 动效：CSS 视图过渡之收缩和展开动效

*   Web 动效：滚动驱动动效之检测文本是否溢出

*   Web 动效：滚动驱动动效之数量检测

*   Web 动效：滚动驱动动效之尺寸检测

*   Web 动效：滚动驱动动效之创建电梯导航菜单

*   Web 动效：滚动驱动动效之创建滚动指示器

*   Web 动效：滚动驱动动效之滚动阴影

*   Web 动效：滚动驱动动效之缩放动画

*   Web 动效：滚动驱动动效之反转显式

*   Web 动效：滚动驱动动效之按钮到导航

*   Web 动效：滚动驱动动效之元素淡入淡出效果

*   Web 动效：滚动驱动动效之创建带渐变的滚动条

*   Web 动效：滚动驱动动效之 3D 翻转

*   Web 动效：滚动驱动动效之滚动视差效果

*   Web 动效：滚动驱动动效之滚动图库效果

*   Web 动效：滚动驱动动效之弹出窗口

*   Web 动效：滚动驱动动效之收缩与展开效果

*   Web 动效：锚点定位之交叉动效

*   Web 动效：锚点定位之 OSX Dock 导航

*   Web 动效：锚点定位之滑动悬浮效果