跳到主要内容

CSS 视觉效果属性

视觉效果属性用于控制元素的视觉呈现，包括透明度、阴影、滤镜、混合模式等。这些属性让你能够创建丰富的视觉效果，提升页面的视觉吸引力和用户体验。

该类属性解决什么问题​

视觉效果属性主要解决以下问题：

  1. 视觉层次：通过阴影、透明度等创建视觉层次感
  2. 装饰效果：为元素添加装饰性的视觉效果
  3. 图像处理：使用滤镜处理图片和背景
  4. 混合效果：通过混合模式创建特殊的混合效果
  5. 视觉反馈：通过视觉效果提供交互反馈

核心属性介绍​

透明度属性​

opacity​

设置元素的不透明度。

.element {
  opacity: 1;    /* 完全不透明（默认） */
  opacity: 0.5;   /* 50% 透明 */
  opacity: 0;     /* 完全透明（不可见） */
}

特点：

  • 值范围：0（透明）到 1（不透明）
  • 影响元素及其所有子元素
  • 元素仍然占据空间

visibility​

设置元素的可见性。

.element {
  visibility: visible;  /* 可见（默认） */
  visibility: hidden;   /* 隐藏（仍占据空间） */
  visibility: collapse; /* 折叠（用于表格） */
}

与 display: none 的区别：

  • visibility: hidden：元素隐藏但仍占据空间
  • display: none：元素隐藏且不占据空间

阴影属性​

box-shadow​

设置元素的盒子阴影。

.element {
  box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  /* 语法：x偏移 y偏移 模糊半径 扩散半径 颜色 */
}

/* 多个阴影 */
.element {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 4px 8px rgba(0,0,0,0.1);
}

/* 内阴影 */
.element {
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.3);
}

text-shadow​

设置文本的阴影。

h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  /* 语法：x偏移 y偏移 模糊半径 颜色 */
}

/* 多个阴影 */
h1 {
  text-shadow:
    2px 2px 4px rgba(0,0,0,0.3),
    0 0 10px rgba(255,0,0,0.5);
}

滤镜属性​

filter​

对元素应用图形效果（如模糊、亮度调整等）。

.element {
  filter: blur(5px);           /* 模糊 */
  filter: brightness(1.5);     /* 亮度 */
  filter: contrast(1.2);        /* 对比度 */
  filter: grayscale(50%);      /* 灰度 */
  filter: hue-rotate(90deg);    /* 色相旋转 */
  filter: invert(50%);         /* 反相 */
  filter: opacity(0.5);        /* 透明度 */
  filter: saturate(150%);       /* 饱和度 */
  filter: sepia(50%);          /* 怀旧效果 */
}

组合使用：

.element {
  filter: blur(2px) brightness(1.2) contrast(1.1);
}

backdrop-filter​

对元素背后的内容应用滤镜效果。

.modal-overlay {
  backdrop-filter: blur(10px);  /* 背景模糊 */
  backdrop-filter: brightness(0.5);  /* 背景变暗 */
}

混合模式属性​

mix-blend-mode​

设置元素与背景的混合模式。

.element {
  mix-blend-mode: normal;      /* 正常（默认） */
  mix-blend-mode: multiply;    /* 正片叠底 */
  mix-blend-mode: screen;      /* 滤色 */
  mix-blend-mode: overlay;     /* 叠加 */
  mix-blend-mode: darken;      /* 变暗 */
  mix-blend-mode: lighten;     /* 变亮 */
  mix-blend-mode: color-dodge; /* 颜色减淡 */
  mix-blend-mode: color-burn;  /* 颜色加深 */
  mix-blend-mode: difference;  /* 差值 */
  mix-blend-mode: exclusion;   /* 排除 */
}

background-blend-mode​

设置背景图片和背景颜色的混合模式。

.element {
  background-image: url("image.jpg");
  background-color: blue;
  background-blend-mode: multiply;
}

裁剪属性​

clip-path​

裁剪元素的可见区域。

.element {
  clip-path: circle(50%);           /* 圆形 */
  clip-path: polygon(0 0, 100% 0, 50% 100%);  /* 多边形 */
  clip-path: inset(10% 20% 30% 40%);  /* 矩形 */
}

遮罩属性​

mask​

设置元素的遮罩。

.element {
  mask: url("mask.png");
  mask-image: linear-gradient(to bottom, transparent, black);
  mask-size: cover;
  mask-position: center;
}

常见组合用法​

1. 卡片阴影效果​

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s;
}

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

2. 图片滤镜效果​

.image {
  filter: grayscale(100%);
  transition: filter 0.3s;
}

.image:hover {
  filter: grayscale(0%);
}

3. 毛玻璃效果​

.glass {
  background-color: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

4. 文本效果​

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

示例演示​

示例 1：卡片悬停效果​

<div class="card">
  <img src="image.jpg" alt="图片">
  <h3>卡片标题</h3>
  <p>卡片描述</p>
</div>
.card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.card img {
  width: 100%;
  filter: brightness(1);
  transition: filter 0.3s;
}

.card:hover img {
  filter: brightness(1.1);
}

示例 2：图片画廊效果​

<div class="gallery">
  <div class="gallery-item">
    <img src="image1.jpg" alt="图片 1">
  </div>
  <div class="gallery-item">
    <img src="image2.jpg" alt="图片 2">
  </div>
</div>
.gallery-item {
  overflow: hidden;
  border-radius: 8px;
}

.gallery-item img {
  width: 100%;
  filter: grayscale(50%);
  transition: filter 0.3s, transform 0.3s;
}

.gallery-item:hover img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

示例 3：毛玻璃导航​

<nav class="navbar">
  <div class="nav-content">导航内容</div>
</nav>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

示例 4：混合模式效果​

<div class="overlay">
  <h1>标题文字</h1>
</div>
.overlay {
  background-image: url("bg.jpg");
  background-size: cover;
  position: relative;
}

.overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,123,255,0.5);
  mix-blend-mode: multiply;
}

.overlay h1 {
  position: relative;
  z-index: 1;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

使用建议​

1. 注意性能​

滤镜和阴影可能影响性能，特别是动画中：

/* 优化：使用 will-change */
.animated {
  will-change: filter, transform;
}

/* 优化：使用 transform 代替 filter 动画 */
.element {
  transition: transform 0.3s;  /* 比 filter 性能更好 */
}

2. 合理使用阴影​

不要过度使用阴影，保持视觉层次清晰：

/* 推荐：适度使用 */
.card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 不推荐：过度使用 */
.card {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 4px 8px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.1);
}

3. 浏览器兼容性​

某些滤镜和混合模式可能不支持旧浏览器：

/* 提供降级方案 */
.element {
  opacity: 0.8;  /* 降级方案 */
}

@supports (backdrop-filter: blur(10px)) {
  .element {
    backdrop-filter: blur(10px);
  }
}

4. 可访问性​

确保视觉效果不影响可访问性：

/* 确保文本有足够的对比度 */
.text {
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);  /* 增加对比度 */
}

小结​

视觉效果属性用于创建丰富的视觉效果：

  • 透明度：opacity、visibility 控制元素可见性
  • 阴影：box-shadow、text-shadow 创建深度感
  • 滤镜：filter、backdrop-filter 处理图像效果
  • 混合模式：mix-blend-mode、background-blend-mode 创建混合效果
  • 裁剪和遮罩：clip-path、mask 控制可见区域

使用建议：

  • 注意性能影响
  • 合理使用阴影
  • 考虑浏览器兼容性
  • 确保可访问性

掌握了视觉效果属性，你就能创建更加吸引人的视觉设计。在下一章，我们将学习交互与行为属性，了解如何控制用户的交互体验。