CSS 高级✍️ CSS3 的线性渐变、径向渐变、Filter 滤镜 [ ricepudding ]

渐变

CSS3 的渐变 （Gradient） 允许我们创建从一种颜色平滑过渡到另一种颜色的效果，无需使用图片，分为线性渐变 （Linear Gradient） 和径向渐变 （Radial Gradient） 两类；

线性渐变

语法：

background: linear-gradient([方向/角度], 颜色1 [位置1], 颜色2 [位置2], ...);

方向 / 角度：
1. 方向关键词：to top （向上）、to right （向右）、to bottom （向下，默认）、to left （向左）、to top right （右上） 等；
2. 角度值：如 45deg （45 度角）、135deg （135 度角），角度从水平向右开始，逆时针旋转计算；
颜色与位置
1. 颜色值：支持十六进制、RGB/RGBA、HSL/HSLA、颜色名等；
2. 位置：可使用像素 （px）、百分比 （%） 或无单位数值 （0-1），默认均匀分布；

径向渐变

语法：

background: radial-gradient([形状 大小] at 位置, 颜色1 [位置1], 颜色2 [位置2], ...);

形状
1. circle （圆形，默认）：等比例缩放；
2. ellipse （椭圆形）：根据容器尺寸自适应；
大小
1. 关键词：
  1. closest-side：渐变到最近的边；
  2. farthest-side：渐变到最远的边 （默认）；
  3. closest-corner：渐变到最近的角；
  4. farthest-corner：渐变到最远的角；
2. 具体值：如 100px （圆形半径）、50% 30% （椭圆的横轴 / 纵轴半径）；
位置
1. 默认中心点 （center），可通过关键词 （top left、bottom right等） 或坐标 （50px 50px、30% 70%） 指定；

重复渐变

CSS3 还支持重复线性渐变 （repeating-linear-gradient） 和重复径向渐变 （repeating-radial-gradient），通过颜色位置小于 100% 实现循环效果；

/* 重复线性渐变 */
.repeat-linear {
  background: repeating-linear-gradient(45deg, #f00 0px, #f00 20px, #00f 20px, #00f 40px);
}

/* 重复径向渐变 */
.repeat-radial {
  background: repeating-radial-gradient(circle, #ff0 0%, #ff0 10%, #0ff 10%, #0ff 20%);
}

线性渐变案例

径向渐变案例

Filter 滤镜

CSS3 Filter （滤镜） 是一组可视化效果的 CSS 属性，用于对元素 （图片、背景、文本甚至整个 DOM 节点） 进行图形处理，如模糊、亮度调整、色彩反转等；

它基于 SVG 滤镜规范实现，无需修改原图即可实时渲染视觉效果，且支持动画和过渡，兼容性覆盖现代主流浏览器 （IE 除外）；

核心特性

作用对象：所有 HTML 元素 （img、div、video、文本等），甚至 body/html 根元素；
叠加规则：支持多个滤镜函数叠加 （空格分隔），按从左到右顺序执行；
单位支持：不同函数支持不同单位 （如px、%、无单位数值），部分支持负数 （如hue-rotate）；
性能：硬件加速渲染 （GPU），但复杂叠加可能影响性能 （如多层blur）；
兼容性：Chrome 18+、Firefox 35+、Safari 6+、Edge 12+，移动端基本兼容 （需注意 - webkit - 前缀，现代浏览器可省略）；

基础语法

/* 单个滤镜 */
.element {
  filter: 滤镜函数(参数);
}

/* 多个滤镜叠加（空格分隔） */
.element {
  filter: blur(5px) brightness(1.2) contrast(150%);
}

/* 重置滤镜 */
.element {
  filter: none;
}

/* 浏览器前缀（旧版兼容） */
.element {
  -webkit-filter: blur(5px); /* Safari/Chrome旧版 */
  filter: blur(5px);
}

滤镜函数详解

blur ()：高斯模糊

作用：给元素添加高斯模糊效果，参数越大越模糊；
参数：长度值 （px、em等），不允许百分比，最小值为 0；

示例：

/* 5px模糊，常用作背景毛玻璃 */
.blur-bg {
  filter: blur(5px);
  backdrop-filter: blur(5px); /* 背景模糊（仅影响元素后方内容） */
}

注意：blur() 会模糊元素本身，backdrop-filter 仅模糊元素下方的内容 （需配合background: rgba()使用）；

brightness ()：亮度调整

作用：调整元素的亮度，100% 为原始亮度；
参数：数值 （1=100%） 或百分比，0 为全黑，>1/100% 增亮，<1/100% 变暗；

示例：

/* 亮度提升20% */
.bright {
  filter: brightness(1.2); /* 等价于brightness(120%) */
}
/* 暗化 */
.dark {
  filter: brightness(0.7);
}

contrast ()：对比度调整

作用：调整元素的对比度，100% 为原始对比度；
参数：数值 （1=100%） 或百分比，0 为全灰，>1/100% 提高对比度，<1/100% 降低对比度；

示例：

/* 高对比度 */
.high-contrast {
  filter: contrast(180%);
}
/* 低对比度 */
.low-contrast {
  filter: contrast(50%);
}

grayscale ()：灰度转换

作用：将元素转为灰度图，100% 为完全灰度，0% 为原始色彩；
参数：数值 （1=100%） 或百分比，取值范围 0~1/0%~100%；

示例：

/* 完全灰度（黑白效果） */
.grayscale-img {
  filter: grayscale(100%);
}

hue-rotate ()：色相旋转

作用：调整元素的色相 （颜色基调），基于色轮旋转角度；
参数：角度值 （deg），无取值上限 （360deg=0deg），支持负数；

示例：

/* 色相旋转90度（红→绿） */
.hue-shift {
  filter: hue-rotate(90deg);
}
/* 反向色相（180deg） */
.hue-invert {
  filter: hue-rotate(180deg);
}

invert ()：颜色反转

作用：反转元素的颜色 （类似照片底片效果），100% 为完全反转；
参数：数值 （1=100%） 或百分比，取值范围 0~1/0%~100%；

示例：

/* 完全颜色反转 */
.invert-text {
  filter: invert(100%);
  background: #000;
  color: #fff; /* 反转后文字变白色 */
}

opacity ()：透明度

作用：调整元素的透明度，与 opacity 属性类似，但 filter: opacity() 支持硬件加速；
参数：数值 （1=100%） 或百分比，0 为完全透明，1 为完全不透明；

示例：

.transparent {
  filter: opacity(0.5); /* 50%透明，等价于opacity: 0.5 */
}

区别：opacity 会影响子元素，filter: opacity() 在部分浏览器中渲染更高效，且可与其他滤镜叠加；

saturate ()：饱和度调整

作用：调整元素颜色的饱和度 （鲜艳程度），100% 为原始饱和度；
参数：数值 （1=100%） 或百分比，0 为完全不饱和 （灰度），>1/100% 提高饱和度，<1/100% 降低饱和度；

示例：

/* 高饱和度（更鲜艳） */
.saturate-high {
  filter: saturate(200%);
}
/* 低饱和度（接近灰度） */
.saturate-low {
  filter: saturate(30%);
}

sepia ()：褐色调（复古效果）

作用：将元素转为褐色调 （老照片效果），100% 为完全褐色；
参数：数值 （1=100%） 或百分比，取值范围 0~1/0%~100%；

示例：

/* 复古老照片效果 */
.sepia-photo {
  filter: sepia(80%);
}

drop-shadow ()：投影效果

作用：给元素添加投影，与 box-shadow 类似，但 drop-shadow 会跟随元素的透明区域 （如 PNG 图片的轮廓）；
参数：drop-shadow (x偏移 y偏移模糊半径颜色)，参数规则与 box-shadow 一致 （模糊半径和颜色可选）；

示例：

/* 红色投影，偏移5px，模糊10px */
.drop-shadow-img {
  filter: drop-shadow(5px 5px 10px #ff0000);
}

区别：
1. box-shadow：基于元素的盒模型 （矩形） 生成投影，不考虑透明区域；
2. drop-shadow：基于元素的像素轮廓生成投影，更贴合不规则形状 （如圆形、透明图片）；

url ()：自定义 SVG 滤镜

作用：引用外部或内联的 SVG 滤镜，实现更复杂的效果 （如纹理、渐变、变形）；
参数：SVG 滤镜的 URL （#filter-id或外部文件路径）；

示例：

<!-- 内联SVG滤镜 -->
<svg width="0" height="0" style="position: absolute;">
  <filter id="custom-filter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    <feColorMatrix type="matrix" values="1 0 0 0 0
                                        0 1 0 0 0
                                        0 0 1 0 0
                                        0 0 0 1 0" />
  </filter>
</svg>

<div style="filter: url(#custom-filter);">自定义滤镜效果</div>

案例

电影谢幕效果

之水滴融合

文字融合

打赏作者

您的打赏是我前进的动力

微信

支付宝

CSS 高级✍️ CSS3 的 animation 动画

CSS 高级✍️ CSS3 的 transform 变形

你好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多