FORMA

视觉效果

视觉效果用于强化层次、引导注意力与交互反馈，常与 变换与动画 配合。需注意：过度滤镜、混合与动效会影响性能与无障碍（对比度、焦点可见性、前庭敏感用户）。

边框与轮廓

边框属于 盒模型 的 border 区域，参与布局尺寸；outline 画在 border 外侧，不占布局空间。

css
.box {
    border: 2px solid #3498db;
    border-radius: 8px;
    border-top: 4px dashed #e74c3c;
    /* border-image 需配合 slice；渐变边框常用伪元素或 mask 替代 */
    border-image: linear-gradient(to right, #3498db, #2ecc71) 1;
}
css
/* 焦点样式：勿随意 outline: none */
.control:focus-visible {
    outline: 3px solid #f39c12;
    outline-offset: 4px;
}
对比borderoutline
占布局空间是否
分边设置可（四边）通常整体一条线
典型用途卡片、输入框边界键盘焦点指示（配合 :focus-visible）

滤镜（filter）

对元素（含其子内容）整体施加图形效果，常触发合成层，大量全屏滤镜有 GPU 成本。

css
.thumb {
    filter: blur(4px) grayscale(50%);
}
.icon {
    /* 阴影轮廓；与 box-shadow 不同，follows 透明区域 */
    filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.25));
}

常用函数：blur()、brightness()、contrast()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()。多函数按书写顺序依次应用。

filter: opacity() 只影响该元素绘制，与元素自身 opacity 属性行为类似但作用域不同；子元素无法「逃出」父级 filter。

backdrop-filter

对元素背后、已合成的内容施加滤镜（毛玻璃、模糊遮罩），常用于半透明导航栏、模态层：

css
.glass {
    background: rgb(255 255 255 / 0.6);
    backdrop-filter: blur(12px) saturate(120%);
}

与 filter 一样会创建合成层；大面积模糊有性能成本。不支持时应有不透明背景回退。

混合模式

属性作用
mix-blend-mode元素与其下方已合成内容混合
background-blend-mode同一元素多层背景之间混合
css
.hero {
    background:
        linear-gradient(to right, #3498db, #2ecc71),
        url("photo.jpg");
    background-blend-mode: multiply;
    background-size: cover;
}
.overlay {
    mix-blend-mode: screen;
}

裁剪与遮罩

clip-path

按路径裁剪可见区域（不含 border 外侧），常用于几何形状、过渡动画（可动画 clip-path）。

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

mask / mask-image

用图像或渐变的 alpha/亮度 控制透明度。标准属性为 mask-*；部分环境仍需 -webkit-mask-*。与 clip-path 相比更适合作柔和边缘。

渐变文字（background-clip: text）

css
.title {
    background-image: linear-gradient(to right, #3498db, #2ecc71);
    background-clip: text;
    -webkit-background-clip: text; /* WebKit 兼容 */
    color: transparent;
}

确保正文对比度仍达标；勿仅依赖渐变作为唯一信息载体。

性能与无障碍

  • 大区域 blur、mix-blend-mode 谨慎使用；移动端注意电量与帧率。
  • 焦点环用 outline / box-shadow 模拟时，保证 :focus-visible 清晰可见。
  • 尊重 @media (prefers-reduced-motion: reduce)，与 动画 章节一致。

总结

  • border 参与布局，outline 用于焦点、不占位。
  • filter / blend 适合局部强调，注意合成开销。
  • clip-path / mask 控制可见形状；渐变字需兼顾对比度与兼容性。

参考文献

以下链接在编写时均可正常访问：

资料说明
MDN：filter滤镜函数
MDN：backdrop-filter背景模糊
MDN：mix-blend-mode混合模式
MDN：clip-path裁剪路径
MDN：mask遮罩
MDN：outline轮廓与焦点
W3C：Filter Effects Module Level 1滤镜规范（英文）

相关文章

Series

css

20 / 20

语法基础：变量、嵌套与运算