视觉特效
在现代网页开发中，设计师和开发者常常需要对页面元素的视觉效果进行细致入微的调控。得益于CSS的多样化视觉特性，我们可以像使用Photoshop、Figma等专业图像工具一样，为网页元素赋予丰富多彩的特效。这些视觉特效不仅可以提升页面的美观度与表现力，还能增强用户交互和界面的吸引力。
举个例子：如果你要搭建一个摄影作品集网站，可能希望某些图片区域显示为黑白，而其它部分依然保留彩色效果；或者你希望让两张图片叠加后产生特殊的融合视觉；甚至你可能需要让图片被裁剪为自定义的不规则形状。所有这些创意，实际上都可以通过CSS的滤镜、混合、剪切以及遮罩等功能轻松实现。
这节课我们将介绍这些重要的CSS视觉处理技术。首先，我们会从图像的基础滤镜讲起，学会如何调整色彩、明暗、饱和度，以及如何为元素增添投影等常见效果。随后，我们还会深入了解元素之间的混合方式，不同的blend模式会带来怎样的视觉变化。 虽然这些视觉效果功能极其强大，但在实际使用时仍要权衡网站性能和体验，避免过度堆叠带来负面影响。
CSS过滤器
CSS的filter属性为元素提供了一系列视觉处理效果机制。你可以理解它类似于图像处理软件中的滤镜功能——它既可单独应用，也可多个滤镜叠加形成更复杂的视觉表现。
基础过滤器
最常用的基础滤镜包括模糊（blur）、透明度（opacity）以及投影（drop-shadow）等，这些可以从最根本上改变元素外观。
html
<!DOCTYPE html>
<html>
<head>
<style>
.filter-demo {
width: 300px;
height: 200px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin: 20px;
border-radius: 10px;
}
.blur-effect {
filter: blur(3px);
}
.opacity-effect {
filter: opacity(0.7);
}
.shadow-effect {
filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.3));
}
</style>
</head>
<body>
<div class="filter-demo">原始效果</div>
<div class="filter-demo blur-effect">模糊效果</div>
<div class="filter-demo opacity-effect">透明效果</div>
<div class="filter-demo shadow-effect">投影效果</div>
</body>
</html>颜色处理过滤器
除了常见的视觉特效外，CSS 还为开发者提供了一系列强大的颜色处理过滤器，可以灵活地调整元素或图片的色彩表现。这些滤镜涵盖了从简易的灰阶变换到复杂的色相变化等多种功能，非常实用且易于理解和使用。
灰度滤镜（grayscale）能够将彩色图像转变为灰阶效果，原理是根据像素亮度平衡三原色通道，将图片的颜色信息“去除”，只保留亮度的差异，从而呈现类似黑白照片的效果。
棕褐色滤镜（sepia）则会让图像拥有类似复古照片的棕黄色调。实现方式为调整各个颜色通道的比例，让图片呈现出温暖的年代感，非常适合营造怀旧或艺术氛围。
反色滤镜（invert）则作用于色彩的反转处理，通过对每个颜色通道取反，把本来的颜色映射为其补色。例如，黑色会变成白色，红色会转换为青色。这种滤镜经常应用于需要强烈对比或特殊视觉风格的场景。
色相旋转滤镜（hue-rotate）可以将图像的所有色彩值在色环上整体旋转。实际上，就是将原有的色调“旋转”一个角度，所有颜色会同步发生变化，产生丰富多变的全新视觉效果。该滤镜的可玩性很高，非常适合进行创意设计或动态切换主题色彩。
html
<!DOCTYPE html>
<html>
<head>
<style>
.color-demo {
width: 250px;
height: 150px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin: 15px;
border-radius: 8px;
}
.grayscale-effect {
filter: grayscale(100%);
}
.sepia-effect {
filter: sepia(100%);
}
.invert-effect {
filter: invert(100%);
}
.hue-effect {
filter: hue-rotate(90deg);
}
</style>
</head>
<body>
<div class="color-demo">原始色彩</div>
<div class="color-demo grayscale-effect">灰度效果</div>
<div class="color-demo sepia-effect">棕色调效果</div>
<div class="color-demo invert-effect">反转效果</div>
<div class="color-demo hue-effect">色调旋转</div>
</body>
</html>亮度、对比度和饱和度调节
在CSS中，我们可以借助不同的过滤器对网页中的图像进行细致的视觉调整，这些功能与许多图像编辑软件中的基础调节工具非常类似。通过灵活运用这些滤镜属性，我们可以方便地实现对图片外观的优化与风格变换。
html
<!DOCTYPE html>
<html>
<head>
<style>
.adjustment-demo {
width: 200px;
height: 120px;
background: radial-gradient(circle, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-weight: bold;
margin: 10px;
border-radius: 6px;
}
.brightness-high {
filter: brightness(1.5);
}
.brightness-low {
filter: brightness(0.5);
}
.contrast-high {
filter: contrast(1.5);
}
.contrast-low {
filter: contrast(0.5);
}
.saturation-high {
filter: saturate(2);
}
.saturation-low {
filter: saturate(0.3);
}
</style>
</head>
<body>
<div class="adjustment-demo">原始</div>
<div class="adjustment-demo brightness-high">高亮度</div>
<div class="adjustment-demo brightness-low">低亮度</div>
<div class="adjustment-demo contrast-high">高对比度</div>
<div class="adjustment-demo contrast-low">低对比度</div>
<div class="adjustment-demo saturation-high">高饱和度</div>
<div class="adjustment-demo saturation-low">低饱和度</div>
</body>
</html>SVG过滤器
除了CSS自带的过滤器外，我们还可以借助SVG自定义滤镜来实现更丰富和高级的视觉处理。这类滤镜通常通过SVG的<filter>元素进行配置，可以实现诸如噪声、发光、变形等复杂特效，大大拓展了网页美学的表现力。
SVG滤镜的引用方法
在CSS中应用SVG滤镜时，通常使用url()语法进行关联。这种方式可以让我们将滤镜的具体实现和样式代码相分离，提升了代码的复用性和可维护性。SVG滤镜既可以内嵌于页面的HTML结构中，也可以单独保存为外部SVG文件进行加载引用。
需要注意的是，如果在引用时指定的过滤器ID不存在，或者引用对象不是有效的<filter>元素，浏览器会自动忽略该滤镜声明，也不会对元素产生任何效果。
html
<!DOCTYPE html>
<html>
<head>
<style>
.svg-filter-demo {
width: 280px;
height: 180px;
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin: 20px;
border-radius: 10px;
}
.turbulence-effect {
filter: url(#turbulence-filter);
}
.glow-effect {
filter: url(#glow-filter);
}
</style>
</head>
<body>
<!-- SVG过滤器定义 -->
<svg width="0" height="0">
<defs>
<filter id="turbulence-filter">
<feTurbulence baseFrequency="0.05" numOctaves="3" result="noise"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="10"/>
</filter>
<filter id="glow-filter">
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
</svg>
<div class="svg-filter-demo">原始效果</div>
<div class="svg-filter-demo turbulence-effect">湍流效果</div>
<div class="svg-filter-demo glow-effect">发光效果</div>
</body>
</html>过滤器链的应用
CSS滤镜的一项重要优势在于，它们允许我们将多个不同的滤镜效果进行顺序叠加。通过合理搭配多种滤镜参数，可以实现更加多样化、层次感丰富甚至艺术感十足的视觉表现。
具体来说，当我们在元素上连续声明多个filter属性时，浏览器会依照书写的先后顺序逐一处理，每一步滤镜的处理结果都会作为下一步的输入。正因为这种“串联式”机制，开发者能够灵活地组合滤镜，创造出与单一滤镜截然不同、更具冲击力的视觉效果。
html
<!DOCTYPE html>
<html>
<head>
<style>
.chain-demo {
width: 250px;
height: 150px;
background: radial-gradient(circle at 30% 40%, #ff7e5f, #feb47b);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin: 15px;
border-radius: 8px;
}
.single-blur {
filter: blur(2px);
}
.blur-shadow {
filter: blur(2px) drop-shadow(3px 3px 5px rgba(0,0,0,0.4));
}
.complex-chain {
filter: contrast(1.2) saturate(1.3) hue-rotate(15deg) blur(1px);
}
.svg-plus-css {
filter: url(#emboss-filter) contrast(1.1) brightness(1.05);
}
</style>
</head>
<body>
<!-- SVG浮雕过滤器 -->
<svg width="0" height="0">
<defs>
<filter id="emboss-filter">
<feConvolveMatrix
kernelMatrix="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 128 0"
order="3"/>
</filter>
</defs>
</svg>
<div class="chain-demo">原始效果</div>
<div class="chain-demo single-blur">单一模糊</div>
<div class="chain-demo blur-shadow">模糊+阴影</div>
<div class="chain-demo complex-chain">复杂链式</div>
<div class="chain-demo svg-plus-css">SVG+CSS混合</div>
</body>
</html>组合和混合
在前端网页开发中，元素之间发生重叠是非常常见的现象。以往，重叠时上层元素通常会直接覆盖下层内容，或者通过设置透明度让下方部分内容仍然可见。而如今，CSS引入了混合模式（Blend Mode），极大丰富了我们的视觉表现手法，使重叠区域可以实现多种多样的合成效果，让不同图层间呈现出更加精彩的视觉交互。
元素的混合模式
当页面内的元素出现叠加时，我们可以利用mix-blend-mode属性，精确控制上层元素（前景层）与下层内容（背景层）之间的颜色和像素融合方式。该属性可以指定多种混合算法，从而实现丰富的视觉风格，比如变亮、变暗、色相叠加等。
通常情况下，mix-blend-mode的初始值是normal，即采用最基本的alpha透明度混合方式：上层的不透明区域会完全覆盖下方元素，而透明或半透明区域则允许底部内容部分显现出来。
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: linear-gradient(45deg, #667eea, #764ba2);
min-height: 400px;
padding: 40px;
font-family: Arial, sans-serif;
}
.blend-container {
position: relative;
width: 300px;
height: 200px;
margin: 20px;
display: inline-block;
}
.background-layer {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 30%, #ff6b6b, #4ecdc4);
border-radius: 10px;
}
.foreground-layer {
position: absolute;
width: 200px;
height: 150px;
background: linear-gradient(135deg, #ffeaa7, #dda0dd);
border-radius: 50%;
top: 25px;
left: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-weight: bold;
}
.multiply-blend {
mix-blend-mode: multiply;
}
.screen-blend {
mix-blend-mode: screen;
}
.overlay-blend {
mix-blend-mode: overlay;
}
.difference-blend {
mix-blend-mode: difference;
}
</style>
</head>
<body>
<div class="blend-container">
<div class="background-layer"></div>
<div class="foreground-layer">正常混合</div>
</div>
<div class="blend-container">
<div class="background-layer"></div>
<div class="foreground-layer multiply-blend">正片叠底</div>
</div>
<div class="blend-container">
<div class="background-layer"></div>
<div class="foreground-layer screen-blend">滤色</div>
</div>
<div class="blend-container">
<div class="background-layer"></div>
<div class="foreground-layer overlay-blend">叠加</div>
</div>
<div class="blend-container">
<div class="background-layer"></div>
<div class="foreground-layer difference-blend">差值</div>
</div>
</body>
</html>背景混合模式
除了元素间的混合，我们还可以让单个元素内的多个背景图像相互混合。这就是background-blend-mode的作用。与mix-blend-mode不同，background-blend-mode只在元素的背景层之间进行混合，不会影响元素与其背后的其他元素之间的混合。
html
<!DOCTYPE html>
<html>
<head>
<style>
.bg-blend-demo {
width: 280px;
height: 180px;
margin: 20px;
display: inline-block;
border-radius: 10px;
color: white;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.normal-bg {
background:
linear-gradient(45deg, #ff6b6b, #4ecdc4),
radial-gradient(circle at 70% 30%, #ffeaa7, #dda0dd);
}
.multiply-bg {
background:
linear-gradient(45deg, #ff6b6b, #4ecdc4),
radial-gradient(circle at 70% 30%, #ffeaa7, #dda0dd);
background-blend-mode: multiply;
}
.screen-bg {
background:
linear-gradient(45deg, #ff6b6b, #4ecdc4),
radial-gradient(circle at 70% 30%, #ffeaa7, #dda0dd);
background-blend-mode: screen;
}
.overlay-bg {
background:
linear-gradient(45deg, #ff6b6b, #4ecdc4),
radial-gradient(circle at 70% 30%, #ffeaa7, #dda0dd);
background-blend-mode: overlay;
}
.color-burn-bg {
background:
linear-gradient(45deg, #ff6b6b, #4ecdc4),
radial-gradient(circle at 70% 30%, #ffeaa7, #dda0dd);
background-blend-mode: color-burn;
}
</style>
</head>
<body>
<div class="bg-blend-demo normal-bg">正常背景</div>
<div class="bg-blend-demo multiply-bg">正片叠底</div>
<div class="bg-blend-demo screen-bg">滤色</div>
<div class="bg-blend-demo overlay-bg">叠加</div>
<div class="bg-blend-demo color-burn-bg">颜色加深</div>
</body>
</html>混合模式隔离与元素自包含
在进行复杂的视觉效果设计时，我们往往需要控制混合模式作用的节点范围，或者提升页面元素的渲染与布局性能。为此，CSS 提供了 isolation 和 contain 两个属性，能够分别实现混合关系的隔离和元素的自我约束。
混合模式隔离
一般情况下，元素设置混合模式后，会和其下面所有内容进行颜色和样式的混合。有些场景中，我们希望让某个元素组只在自身内部做混合处理，而避免影响到外部的其他内容。此时，就可以通过 isolation 属性，让这些元素变为一个独立的混合上下文，实现混合效果的精准控制。
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 500px;
padding: 40px;
font-family: Arial, sans-serif;
}
.isolation-demo {
position: relative;
width: 350px;
height: 250px;
margin: 30px;
display: inline-block;
}
.base-layer {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 40% 40%, #ff9a9e, #fecfef);
border-radius: 15px;
}
.overlay-element {
position: absolute;
width: 150px;
height: 120px;
background: linear-gradient(45deg, #a8e6cf, #ffd3a5);
border-radius: 50%;
top: 30px;
left: 40px;
mix-blend-mode: multiply;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-weight: bold;
font-size: 14px;
text-align: center;
}
.isolated-group {
position: absolute;
top: 20px;
left: 20px;
isolation: isolate;
}
.non-isolated-group {
position: absolute;
top: 150px;
left: 180px;
}
</style>
</head>
<body>
<div class="isolation-demo">
<div class="base-layer"></div>
<!-- 非隔离组 -->
<div class="non-isolated-group">
<div class="overlay-element">非隔离混合</div>
</div>
<!-- 隔离组 -->
<div class="isolated-group">
<div class="overlay-element">隔离混合</div>
</div>
</div>
</body>
</html>元素包含
contain 属性是 CSS 中用于实现元素自包含的一种重要机制。它通过告知浏览器该元素在特定方面（如尺寸、布局、绘制或样式）是完全自足的，从而允许浏览器为这个元素及其后代之间的渲染和布局边界做出明确划分。这样不仅有助于构建更加模块化、可预测的组件，还能极大提升浏览器的性能优化空间。通过限定元素的渲染和计算影响范围（如 size、layout、paint 和 strict 等取值），contain 能有效防止外部更改导致的不必要重绘和重排，适用于大规模和高性能需求的前端场景。
html
<!DOCTYPE html>
<html>
<head>
<style>
.contain-demo {
width: 300px;
height: 200px;
margin: 20px;
padding: 15px;
border: 3px solid #667eea;
background: linear-gradient(45deg, #ff9a9e, #fecfef);
display: inline-block;
color: #333;
font-weight: bold;
overflow: hidden;
}
.size-contained {
contain: size;
background: linear-gradient(45deg, #a8e6cf, #ffd3a5);
}
.layout-contained {
contain: layout;
background: linear-gradient(45deg, #ffd3a5, #a8e6cf);
}
.paint-contained {
contain: paint;
background: linear-gradient(45deg, #ffeaa7, #dda0dd);
}
.strict-contained {
contain: strict;
background: linear-gradient(45deg, #dda0dd, #ffeaa7);
}
</style>
</head>
<body>
<div class="contain-demo">正常元素<br/>包含所有内容</div>
<div class="contain-demo size-contained">尺寸包含<br/>高度为0</div>
<div class="contain-demo layout-contained">布局包含<br/>内部布局隔离</div>
<div class="contain-demo paint-contained">绘制包含<br/>限制绘制区域</div>
<div class="contain-demo strict-contained">严格包含<br/>全部优化</div>
</body>
</html>控制元素内容
content-visibility 属性是一种 CSS 性能优化工具，它允许浏览器在元素在视口之外或不可见时，跳过对其内容的渲染以及布局计算。这意味着，只有当元素需要显示在屏幕上时，其内部内容才会被真正计算和绘制，从而能显著减少不必要的计算量。
这项技术在实现虚拟滚动、大量列表懒加载或单页面应用中的分页加载时，非常有用，可以有效提升页面的流畅度和响应速度。
html
<!DOCTYPE html>
<html>
<head>
<style>
.visibility-demo {
width: 280px;
height: 180px;
margin: 20px;
padding: 15px;
border: 2px solid #667eea;
background: linear-gradient(45deg, #ff9a9e, #fecfef);
display: inline-block;
color: #333;
font-weight: bold;
overflow: hidden;
}
.hidden-content {
content-visibility: hidden;
background: linear-gradient(45deg, #a8e6cf, #ffd3a5);
}
.auto-content {
content-visibility: auto;
background: linear-gradient(45deg, #ffeaa7, #dda0dd);
}
</style>
</head>
<body>
<div class="visibility-demo">
正常可见<br/>
内容完全渲染
</div>
<div class="visibility-demo hidden-content">
内容隐藏<br/>
不可见且不可访问
</div>
<div class="visibility-demo auto-content">
自动管理<br/>
不可见时跳过渲染
</div>
</body>
</html>浮动形状
以往在网页设计中，使用浮动元素时，文本总是绕着一个固定的矩形框流动。但是，借助CSS的形状相关属性，我们能够打破这一局限，实现让文字围绕任意曲线或复杂路径排布，使页面更加美观与富有表现力。
基于图片的环绕路径
利用图片作为浮动元素时，可以通过其透明区域定义文本的环绕路线。这样一来，文字会根据图片的不规则边缘或者透明部分，自然地填充周围空间，带来更丰富和动态的版式效果。
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 40px;
background: #f8f9fa;
}
.shape-demo {
margin: 30px 0;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.image-shape {
float: left;
width: 150px;
height: 150px;
margin: 0 20px 10px 0;
border-radius: 50%;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
shape-outside: circle(50%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
}
.text-content {
margin: 0;
}
</style>
</head>
<body>
<div class="shape-demo">
<div class="image-shape">圆形浮动</div>
<p class="text-content">
这段文字会围绕着左侧的圆形元素流动。注意文字是如何沿着圆形的轮廓排列的，而不是简单地绕过一个矩形区域。
这种效果让我们的布局看起来更加自然和优雅。圆形浮动元素创造了一个流畅的视觉体验。
</p>
</div>
<div class="shape-demo">
<div class="image-shape" style="shape-outside: ellipse(50% 70%); width: 180px; height: 120px; border-radius: 50% 70%;">
椭圆形浮动
</div>
<p class="text-content">
现在我们使用椭圆形状。文字会沿着椭圆的曲线流动，创造出更加动态的布局效果。
椭圆形的浮动元素能够提供更多的变化性和视觉趣味性。
</p>
</div>
</body>
</html>基础形状函数
除了通过插入图片实现外，CSS 还为我们提供了内置的几何形状函数，可以非常方便地绘制规则的形状。这些 shape 函数（如 circle、ellipse 和 polygon）允许我们指定圆形、椭圆形或者多边形的区域，从而精细地控制内容的环绕方式与页面布局。
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 40px;
background: #f8f9fa;
}
.shape-example {
margin: 30px 0;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
clear: both;
}
.circle-float {
float: left;
width: 120px;
height: 120px;
margin: 0 20px 10px 0;
background: linear-gradient(45deg, #ff9a9e, #fecfef);
border-radius: 50%;
shape-outside: circle();
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
}
.ellipse-float {
float: right;
width: 160px;
height: 100px;
margin: 0 0 10px 20px;
background: linear-gradient(45deg, #a8e6cf, #ffd3a5);
border-radius: 50%;
shape-outside: ellipse(50% 50%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
}
.inset-float {
float: left;
width: 140px;
height: 140px;
margin: 0 20px 10px 0;
background: linear-gradient(45deg, #ffeaa7, #dda0dd);
shape-outside: inset(20px 15px 25px 10px);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
font-size: 12px;
}
</style>
</head>
<body>
<div class="shape-example">
<div class="circle-float">圆形<br/>circle()</div>
<p>
圆形形状是最简单的几何形状之一。文字会沿着圆形的周长流动，创造出流畅的视觉效果。
这种形状特别适合用于头像或圆形图标的布局设计。
</p>
</div>
<div class="shape-example">
<div class="ellipse-float">椭圆形<br/>ellipse()</div>
<p>
椭圆形提供了更多的灵活性。我们可以控制椭圆的长轴和短轴，让文字围绕着椭圆形的曲线排列。
这种形状适用于需要不对称布局的场景。
</p>
</div>
<div class="shape-example">
<div class="inset-float">内嵌形状<br/>inset()</div>
<p>
内嵌形状允许我们从矩形区域内部缩进，创造出不规则的四边形。文字会沿着这个不规则的形状流动，
这种技术在杂志排版中非常常见，可以创造出更加丰富的视觉层次。
</p>
</div>
</body>
</html>剪切与
除了常见的滤色（filter）与混合（mix-blend-mode）效果，CSS 还赋予开发者对元素可见区域的高度精确控制能力。这一能力主要通过剪切（clip-path）和遮罩（mask）技术实现，使开发者能够根据任意几何路径、矢量图形甚至位图蒙版，对元素的渲染区域进行裁定。得益于这些技术，设计师不仅能够实现诸如圆形、椭圆、星形、六边形等简单形状的“裁剪”，还能借助 SVG 路径或复杂蒙版，创造出极富创意和层次感的视觉效果。 这些高级视觉控件可广泛应用于头像头像裁剪、装饰性排版、卡片式组件以及品牌形象塑造等场景，极大地扩展了网页设计的表现力。
剪切路径（Clip Path）
clip-path 属性是一种功能强大的 CSS 裁剪工具，它支持多种基本形状（如 circle、ellipse、inset、polygon 等）以及 SVG 路径（path）语法。通过为元素指定剪切路径，可以精准定义其实际显示的区域，任何超出该路径的内容都不会被渲染和响应交互。需要注意的是，clip-path 只影响元素本身的可见区域而不影响其实际布局空间，因此适合实现诸如图形组件、内容块部分展示、非矩形交互区等需求。
html
<!DOCTYPE html>
<html>
<head>
<style>
.clip-demo {
width: 300px;
height: 200px;
margin: 20px;
display: inline-block;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
}
.circle-clip {
clip-path: circle(50%);
}
.ellipse-clip {
clip-path: ellipse(60% 40%);
}
.inset-clip {
clip-path: inset(20px 15px 25px 10px round 10px);
}
.polygon-clip {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
</style>
</head>
<body>
<div class="clip-demo">原始元素</div>
<div class="clip-demo circle-clip">圆形剪切</div>
<div class="clip-demo ellipse-clip">椭圆剪切</div>
<div class="clip-demo inset-clip">内嵌剪切</div>
<div class="clip-demo polygon-clip">多边形剪切</div>
</body>
</html>剪切框
除了使用 clip-path 的几何形状函数外，CSS 还允许我们基于盒模型（Box Model）中的各个区域（如 content-box、padding-box、border-box、margin-box）对元素进行剪切。通过将这些标准盒区作为剪切路径的参考，开发者可以精准控制元素内容的可见范围。例如，clip-path: content-box 只显示内容区，clip-path: padding-box 会包括内边距，clip-path: border-box 则扩展到边框，clip-path: margin-box 甚至可包括外边距空间。
html
<!DOCTYPE html>
<html>
<head>
<style>
.box-demo {
width: 250px;
height: 150px;
margin: 20px;
display: inline-block;
background: linear-gradient(45deg, #667eea, #764ba2);
padding: 20px;
border: 5px solid #ff6b6b;
color: white;
font-weight: bold;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.content-box-clip {
clip-path: content-box;
}
.padding-box-clip {
clip-path: padding-box;
}
.border-box-clip {
clip-path: border-box;
}
.margin-box-clip {
clip-path: margin-box;
margin: 30px;
}
</style>
</head>
<body>
<div class="box-demo">无剪切</div>
<div class="box-demo content-box-clip">内容框剪切</div>
<div class="box-demo padding-box-clip">内边距框剪切</div>
<div class="box-demo border-box-clip">边框框剪切</div>
<div class="box-demo margin-box-clip">外边距框剪切</div>
</body>
</html>SVG路径剪切
当面对复杂或不规则几何需求时，标准的基本形状函数（如circle、ellipse、inset、polygon）可能无法满足实际设计目标。此时，可借助clip-path对SVG路径（Path）的支持，精确地定义元素的可见区域。
通过SVG Path语法，我们可以绘制任意复杂曲线、多重折线以及自然轮廓，实现星形、心形、波浪形、异形图标等丰富的裁剪效果。与纯CSS几何形状相比，SVG路径具备更高的表达力和可控性，适合用于品牌视觉、动感设计、艺术化排版等高级场景。
实际开发中，只需将SVG Path字符串作为clip-path的path()参数传入，即可让元素按照该自定义轨迹进行细粒度裁剪。
html
<!DOCTYPE html>
<html>
<head>
<style>
.svg-clip-demo {
width: 280px;
height: 180px;
margin: 20px;
display: inline-block;
background: linear-gradient(45deg, #ff9a9e, #fecfef, #a8e6cf);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
}
.star-clip {
clip-path: path("M50,0 L61,35 L98,35 L68,57 L79,91 L50,70 L21,91 L32,57 L2,35 L39,35 Z");
}
.heart-clip {
clip-path: path("M50,15 C30,5 5,15 5,35 C5,55 50,85 50,85 C50,85 95,55 95,35 C95,15 70,5 50,15 Z");
}
.wave-clip {
clip-path: path("M0,50 Q25,0 50,50 T100,50 Q125,100 150,50 T200,50 Q225,0 250,50 T300,50 V100 H0 Z");
}
</style>
</head>
<body>
<div class="svg-clip-demo">原始元素</div>
<div class="svg-clip-demo star-clip">星形路径</div>
<div class="svg-clip-demo heart-clip">心形路径</div>
<div class="svg-clip-demo wave-clip">波浪路径</div>
</body>
</html>遮罩
遮罩是一种精细且强大的前端视觉处理手段，它允许开发者通过遮罩图像的透明度或亮度分布，灵活地定义目标元素的可见区域。与只提供硬性边界裁切的 clip-path 不同，遮罩支持任意复杂的灰度级（Alpha 通道）及渐变透明度效果，从而能够展现出诸如柔性边缘、半透明、复杂轮廓等丰富的表现力。
在 CSS 中，遮罩技术基于一系列以 mask- 为前缀的属性进行控制。遮罩的本质是利用一张“掩模”图片（mask image）决定被遮罩元素的每个像素的可见度：遮罩图像每个像素的Alpha值或亮度值越大，被遮罩元素对应像素的可见度越高，反之则变透明。
遮罩图像
mask-image 属性是 CSS 遮罩体系的核心，允许开发者为元素指定一张或多张遮罩图像。遮罩图像的来源非常灵活，可以为：
- 位图图片：如 PNG、JPEG，其中 PNG 格式可充分利用其 Alpha 通道特性；
- 矢量图像：如 SVG 矢量遮罩，支持路径的任意构造和高级渐变效果；
- CSS 渐变函数：如
linear-gradient、radial-gradient、conic-gradient等，快速生成动态遮罩； - 多重遮罩：支持逗号分隔的多层遮罩叠加，形成叠加效果。
遮罩图片的亮度或 Alpha 决定了被遮元素各像素点的最终透明度。例如，mask-image: linear-gradient(to right, black, transparent); 会让元素左侧完全可见，右侧逐渐羽化消失。通过结合 mask-mode（决定采用 Alpha 通道还是亮度计算）、mask-repeat、mask-size 等相关属性，开发者可以对遮罩的表现形式进行极为细致的定制。
html
<!DOCTYPE html>
<html>
<head>
<style>
.mask-demo {
width: 300px;
height: 200px;
margin: 20px;
display: inline-block;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
border-radius: 10px;
}
.radial-mask {
-webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 70%);
mask-image: radial-gradient(circle at center, black 40%, transparent 70%);
}
.linear-mask {
-webkit-mask-image: linear-gradient(45deg, black 30%, transparent 70%);
mask-image: linear-gradient(45deg, black 30%, transparent 70%);
}
.conic-mask {
-webkit-mask-image: conic-gradient(from 0deg, black 0deg, transparent 180deg, black 360deg);
mask-image: conic-gradient(from 0deg, black 0deg, transparent 180deg, black 360deg);
}
.checkerboard-mask {
-webkit-mask-image:
repeating-conic-gradient(from 0deg, transparent 0deg 90deg, black 90deg 180deg);
mask-image:
repeating-conic-gradient(from 0deg, transparent 0deg 90deg, black 90deg 180deg);
}
</style>
</head>
<body>
<div class="mask-demo">原始元素</div>
<div class="mask-demo radial-mask">径向渐变遮罩</div>
<div class="mask-demo linear-mask">线性渐变遮罩</div>
<div class="mask-demo conic-mask">锥形渐变遮罩</div>
<div class="mask-demo checkerboard-mask">棋盘格遮罩</div>
</body>
</html>遮罩模式
CSS 遮罩技术的工作原理主要有两种：基于 alpha（透明度）通道和基于 luminance（亮度）值。默认情况下，遮罩按照 alpha 通道进行控制，即遮罩区域的透明度越高，底层内容显示越多，透明度为零的区域则完全遮挡底层内容。
而在某些场景下，我们可能更希望通过遮罩图像的亮度（灰度值）来控制内容的可见性，此时可以使用 mask-mode 属性进行设置。mask-mode 支持 alpha 和 luminance 两种取值：当为 alpha 时，遮罩依据 alpha 通道生效（适用于 PNG、SVG 等带半透明信息的图像）；
当为 luminance 时，遮罩基于图像的亮度值，每个像素点灰度值越高则底层内容越透明，反之则越不透明。合理选择和配置 mask-mode，可以更精准地控制复杂视觉效果中的可见区域，满足不同设计与实现需求。
html
<!DOCTYPE html>
<html>
<head>
<style>
.mode-demo {
width: 280px;
height: 180px;
margin: 20px;
display: inline-block;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
border-radius: 8px;
}
/* 创建一个半透明的遮罩图像 */
.semi-transparent-mask {
-webkit-mask-image: linear-gradient(45deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.3) 100%);
mask-image: linear-gradient(45deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.3) 100%);
}
.alpha-mode {
-webkit-mask-mode: alpha;
mask-mode: alpha;
}
.luminance-mode {
-webkit-mask-mode: luminance;
mask-mode: luminance;
}
/* 灰度遮罩用于亮度模式演示 */
.grayscale-mask {
-webkit-mask-image: linear-gradient(45deg, #666 0%, #ccc 50%, #666 100%);
mask-image: linear-gradient(45deg, #666 0%, #ccc 50%, #666 100%);
}
</style>
</head>
<body>
<div class="mode-demo">原始元素</div>
<div class="mode-demo semi-transparent-mask alpha-mode">Alpha模式<br/>透明度遮罩</div>
<div class="mode-demo semi-transparent-mask luminance-mode">Luminance模式<br/>亮度遮罩</div>
<div class="mode-demo grayscale-mask luminance-mode">灰度遮罩<br/>亮度模式</div>
</body>
</html>遮罩尺寸与重复（mask-size 与 mask-repeat）
在 CSS 遮罩体系中，mask-size 和 mask-repeat 等属性为开发者提供了对遮罩图像空间行为的精细化掌控能力，其用法与 background-size、background-repeat 类似。借助这些属性，可以灵活地调整遮罩图像在元素上的缩放、铺展与重复模式，从而达到符合设计需求的可视效果。
mask-size：用于指定遮罩图像的显示尺寸。它支持auto、cover、contain等关键字，也支持精确的长度和百分比值（如120px 100px或50% 50%），使得遮罩能够适配不同的布局和设备。例如，mask-size: cover;让遮罩完全覆盖元素区域，mask-size: 80px 60px;可指定为固定的像素尺寸。mask-repeat：决定遮罩图像在覆盖元素时的重复方式。其典型值包括repeat（同时水平和垂直重复）、repeat-x、repeat-y、no-repeat（仅显示一次）等。通过合理配置，可以实现瓷砖式、单一或自定义方向的遮罩分布。
示例：下面的代码展示了遮罩图像如何通过不同的尺寸与重复设置，产生多样的组合效果。
html
<!DOCTYPE html>
<html>
<head>
<style>
.size-demo {
width: 250px;
height: 150px;
margin: 20px;
display: inline-block;
background: linear-gradient(45deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
border-radius: 8px;
}
/* 基础遮罩设置 */
.size-demo {
-webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 50%);
mask-image: radial-gradient(circle at center, black 20%, transparent 50%);
}
.cover-size {
-webkit-mask-size: cover;
mask-size: cover;
}
.contain-size {
-webkit-mask-size: contain;
mask-size: contain;
}
.fixed-size {
-webkit-mask-size: 100px 80px;
mask-size: 100px 80px;
}
.percentage-size {
-webkit-mask-size: 150% 120%;
mask-size: 150% 120%;
}
/* 重复模式演示 */
.repeat-demo {
-webkit-mask-image: radial-gradient(circle at center, black 10%, transparent 30%);
mask-image: radial-gradient(circle at center, black 10%, transparent 30%);
-webkit-mask-size: 60px 40px;
mask-size: 60px 40px;
}
.no-repeat {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.repeat-x {
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
}
.repeat-y {
-webkit-mask-repeat: repeat-y;
mask-repeat: repeat-y;
}
.repeat-both {
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
}
</style>
</head>
<body>
<div class="size-demo">默认大小</div>
<div class="size-demo cover-size">覆盖模式</div>
<div class="size-demo contain-size">包含模式</div>
<div class="size-demo fixed-size">固定尺寸</div>
<div class="size-demo percentage-size">百分比尺寸</div>
<div class="size-demo repeat-demo no-repeat">不重复</div>
<div class="size-demo repeat-demo repeat-x">水平重复</div>
<div class="size-demo repeat-demo repeat-y">垂直重复</div>
<div class="size-demo repeat-demo repeat-both">双向重复</div>
</body>
</html>遮罩位置（mask-position）与原始框（mask-origin）
遮罩图像在元素中的定位控制主要通过 mask-position 和 mask-origin 属性实现。
mask-position用于指定遮罩图像在元素上的具体对齐位置，其用法与background-position类似。支持关键字（如center、top left）、长度值（如20px 30px）、百分比（如60% 40%）等形式，允许开发者精准地将遮罩图像定位在所需位置。例如，mask-position: center;会将遮罩图像居中叠加在元素上，mask-position: top left;则将其对齐至元素的左上角。mask-origin决定了遮罩定位与尺寸计算时参考的元素区域基准。其取值包括：border-box（默认）：以包含内边距和边框的整块区域作为遮罩定位基准；padding-box：以仅包含填充(padding)的内部区域为基准，不包括边框；content-box：以不含内边距和边框、仅内容区域为定位基准。
html
<!DOCTYPE html>
<html>
<head>
<style>
.position-demo {
width: 280px;
height: 180px;
margin: 20px;
display: inline-block;
background: linear-gradient(45deg, #ff9a9e, #fecfef);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
border-radius: 8px;
border: 3px solid #667eea;
padding: 15px;
}
/* 基础遮罩设置 */
.position-demo {
-webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 60%);
mask-image: radial-gradient(circle at center, black 30%, transparent 60%);
-webkit-mask-size: 80px 60px;
mask-size: 80px 60px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.center-position {
-webkit-mask-position: center;
mask-position: center;
}
.top-left-position {
-webkit-mask-position: top left;
mask-position: top left;
}
.bottom-right-position {
-webkit-mask-position: bottom right;
mask-position: bottom right;
}
.custom-position {
-webkit-mask-position: 20px 30px;
mask-position: 20px 30px;
}
/* 原始框演示 */
.origin-demo {
-webkit-mask-image: linear-gradient(45deg, black 40%, transparent 60%);
mask-image: linear-gradient(45deg, black 40%, transparent 60%);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.content-origin {
-webkit-mask-origin: content-box;
mask-origin: content-box;
}
.padding-origin {
-webkit-mask-origin: padding-box;
mask-origin: padding-box;
}
.border-origin {
-webkit-mask-origin: border-box;
mask-origin: border-box;
}
</style>
</head>
<body>
<div class="position-demo">默认位置</div>
<div class="position-demo center-position">居中定位</div>
<div class="position-demo top-left-position">左上定位</div>
<div class="position-demo bottom-right-position">右下定位</div>
<div class="position-demo custom-position">自定义定位</div>
<div class="position-demo origin-demo content-origin">内容框原始</div>
<div class="position-demo origin-demo padding-origin">内边距框原始</div>
<div class="position-demo origin-demo border-origin">边框框原始</div>
</body>
</html>遮罩剪切和组合
遮罩剪切（mask-clip）用于指定遮罩图像实际影响的区域，决定遮罩应该作用于元素的内容区（content-box）、内边距区（padding-box）还是包含边框的区域（border-box）。通过调整 mask-clip，开发者可以精确控制遮罩效果渲染在元素的哪些部分，从而实现更为细腻的视觉表现。例如，mask-clip: content-box; 仅在内容区应用遮罩，而 mask-clip: border-box; 则使遮罩扩展到整个含边框区域。
遮罩组合（mask-composite 和 mask-mode）进一步提升遮罩的表现力。当为元素设置多层遮罩时，mask-composite 控制各层之间的叠加（如 add、subtract、intersect、exclude 等模式），定义多重遮罩之间的合成规则；mask-mode 决定每一层遮罩采用 alpha（透明度）还是 luminance（亮度）作为可见性判定基础。
html
<!DOCTYPE html>
<html>
<head>
<style>
.advanced-demo {
width: 260px;
height: 160px;
margin: 20px;
display: inline-block;
background: linear-gradient(45deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
border-radius: 8px;
border: 4px solid #ff6b6b;
padding: 12px;
}
/* 剪切演示 */
.clip-demo {
-webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 70%);
mask-image: radial-gradient(circle at center, black 40%, transparent 70%);
}
.content-clip {
-webkit-mask-clip: content-box;
mask-clip: content-box;
}
.padding-clip {
-webkit-mask-clip: padding-box;
mask-clip: padding-box;
}
.border-clip {
-webkit-mask-clip: border-box;
mask-clip: border-box;
}
/* 组合演示 */
.composite-demo {
-webkit-mask-image:
radial-gradient(circle at 30% 30%, black 30%, transparent 60%),
linear-gradient(45deg, black 40%, transparent 60%);
mask-image:
radial-gradient(circle at 30% 30%, black 30%, transparent 60%),
linear-gradient(45deg, black 40%, transparent 60%);
}
.add-composite {
-webkit-mask-composite: add;
mask-composite: add;
}
.subtract-composite {
-webkit-mask-composite: subtract;
mask-composite: subtract;
}
.intersect-composite {
-webkit-mask-composite: intersect;
mask-composite: intersect;
}
.exclude-composite {
-webkit-mask-composite: exclude;
mask-composite: exclude;
}
</style>
</head>
<body>
<div class="advanced-demo clip-demo">默认剪切</div>
<div class="advanced-demo clip-demo content-clip">内容框剪切</div>
<div class="advanced-demo clip-demo padding-clip">内边距框剪切</div>
<div class="advanced-demo clip-demo border-clip">边框框剪切</div>
<div class="advanced-demo composite-demo">默认组合</div>
<div class="advanced-demo composite-demo add-composite">相加组合</div>
<div class="advanced-demo composite-demo subtract-composite">相减组合</div>
<div class="advanced-demo composite-demo intersect-composite">交集组合</div>
<div class="advanced-demo composite-demo exclude-composite">排除组合</div>
</body>
</html>边框遮罩
边框遮罩（Border Masking）是一门专门针对元素边框区域进行视觉增强的前端技术。它利用专用的 CSS 属性（如 mask-border 相关语法或旧规范中的 -webkit-mask-box-image），不只为元素添加常规的遮罩，而是将遮罩严格应用于边框带区域。借助边框遮罩，开发者能够实现渐变边框、图案边框、高阶羽化等复杂的边框视觉效果，而无需额外嵌套元素或图片资源。
边框遮罩的核心属性与机制
边框遮罩的控制主要依赖以下几个 CSS 属性：
mask-border-source/mask-box-image-source：用于指定遮罩图像资源，支持位图、SVG、CSS 渐变等多种类型。该图像将被切分并映射到元素的边框区域。mask-border-slice/mask-box-image-slice：定义如何将遮罩图像划分为九宫格（四个角、四条边、一块中心区域）并分别缩放、应用至各自边框部分。支持百分比或像素值，并可使用fill关键字决定是否填充中心区域。mask-border-width/mask-box-image-width：决定切片映射到边框上的实际厚度，可调整边框显示的粗细和节奏。mask-border-repeat/mask-box-image-repeat：设置被切片的图像在边与角区域的平铺或拉伸方式（如stretch、repeat、round）。mask-border-outset/mask-box-image-outset：可调整遮罩超出边框本身的距离范围，进一步细化遮罩的视觉伸展。
边框遮罩的核心工作流是在指定遮罩源图后，通过九宫格切片规则将其映射到元素的四个边与四个角，上、中、下、左、右各部分可独立缩放或重复。通过 slice 和 width 参数，开发者能够灵活地控制每一部分遮罩的表现范围和拉伸方式。结合渐变、图案或彩色遮罩，可以模拟出极具表现力和层次感的动感边框，广泛用于卡片、组件高亮等场景。
html
<!DOCTYPE html>
<html>
<head>
<style>
.border-mask-demo {
width: 280px;
height: 180px;
margin: 20px;
display: inline-block;
background: linear-gradient(45deg, #667eea, #764ba2);
border: 20px solid transparent;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
border-radius: 10px;
}
.slice-33 {
-webkit-mask-box-image-source: linear-gradient(45deg, black, transparent);
-webkit-mask-box-image-slice: 33%;
mask-box-image-source: linear-gradient(45deg, black, transparent);
mask-box-image-slice: 33%;
}
.slice-fill {
-webkit-mask-box-image-source: radial-gradient(circle, black 50%, transparent 70%);
-webkit-mask-box-image-slice: 25% fill;
mask-box-image-source: radial-gradient(circle, black 50%, transparent 70%);
mask-box-image-slice: 25% fill;
}
.complex-slice {
-webkit-mask-box-image-source: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
-webkit-mask-box-image-slice: 10% 20% 15% 25%;
mask-box-image-source: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
mask-box-image-slice: 10% 20% 15% 25%;
}
</style>
</head>
<body>
<div class="border-mask-demo">原始边框</div>
<div class="border-mask-demo slice-33">33%切片</div>
<div class="border-mask-demo slice-fill">填充切片</div>
<div class="border-mask-demo complex-slice">复杂切片</div>
</body>
</html>小结
本部分我们学习了CSS视觉特效的一些核心技术。从基础的滤镜效果（如模糊、透明度、阴影和色彩变换）到SVG滤镜的灵活应用，我们逐步扩展了对元素视觉表现的控制力。 随后的混合与合成技术让我们能够实现元素之间复杂的叠加和视觉交互，并通过隔离、可见性及包含控制，进一步提升界面性能和用户体验。
需要注意的是，强大的视觉特效功能应注重合理和有度的使用，无论是性能、安全性还是可访问性都不容忽视。通过本部分的学习，我相信你已经能够运用CSS的强大视觉能力，打造既美观又实用的现代网页界面。但请你始终记住，优秀设计不仅吸引眼球，更强调功能性与可用性。
到这里我们所有想要教会你的CSS知识点都已经覆盖了，结合我们的HTML课程和JavaScript课程，我想你应该已经能够独立完成一个完整的网页开发项目了。
当然，虽然现代的网站开发或者前端开发可远远不止这些，但是它将是你构建任何项目的基础。别满足于我们给你的内容，请你持续学习，不断探索，不断进步。
实战练习
练习1：基础滤镜应用
创建一个带有模糊效果的卡片组件，要求：
- 背景为渐变色
- 应用3px的模糊滤镜
- 添加投影效果
请补全以下CSS代码，实现上述效果：
html
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 300px;
height: 200px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
border-radius: 10px;
margin: 20px;
/* 在这里添加滤镜效果 */
}
</style>
</head>
<body>
<div class="card">模糊卡片</div>
</body>
</html>练习2：颜色变换滤镜
创建一个图像处理组件，实现黑白照片效果和复古棕色调效果。
请补全CSS代码，实现黑白和棕色调效果：
html
<!DOCTYPE html>
<html>
<head>
<style>
.photo {
width: 250px;
height: 150px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
margin: 15px;
border-radius: 8px;
display: inline-block;
}
.grayscale-photo {
/* 添加灰度滤镜 */
}
.sepia-photo {
/* 添加棕色调滤镜 */
}
</style>
</head>
<body>
<div class="photo">原图</div>
<div class="photo grayscale-photo">黑白</div>
<div class="photo sepia-photo">复古</div>
</body>
</html>练习3：混合模式应用
创建一个重叠的视觉效果，使用不同的混合模式。
请补全CSS代码，实现元素重叠的混合效果：
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: linear-gradient(45deg, #667eea, #764ba2);
min-height: 300px;
padding: 40px;
}
.blend-container {
position: relative;
width: 250px;
height: 150px;
margin: 20px;
display: inline-block;
}
.background-layer {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 40%, #ff6b6b, #4ecdc4);
border-radius: 10px;
}
.foreground-layer {
position: absolute;
width: 150px;
height: 100px;
background: linear-gradient(135deg, #ffeaa7, #dda0dd);
border-radius: 50%;
top: 25px;
left: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-weight: bold;
/* 添加混合模式 */
}
</style>
</head>
<body>
<div class="blend-container">
<div class="background-layer"></div>
<div class="foreground-layer">混合效果</div>
</div>
</body>
</html>练习4：剪切路径
创建一个圆形头像组件，使用clip-path实现圆形裁剪。
请补全CSS代码，实现圆形头像裁剪：
html
<!DOCTYPE html>
<html>
<head>
<style>
.avatar {
width: 150px;
height: 150px;
background: linear-gradient(45deg, #ff9a9e, #fecfef, #a8e6cf);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 18px;
margin: 20px;
/* 添加圆形剪切路径 */
}
</style>
</head>
<body>
<div class="avatar">头像</div>
</body>
</html>练习5：遮罩效果
创建一个带有渐变遮罩的组件，实现边缘渐隐效果。
请补全CSS代码，实现渐变遮罩效果：
html
<!DOCTYPE html>
<html>
<head>
<style>
.masked-element {
width: 280px;
height: 180px;
background: linear-gradient(45deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin: 20px;
/* 添加线性渐变遮罩 */
}
</style>
</head>
<body>
<div class="masked-element">渐变遮罩</div>
</body>
</html>练习6：形状环绕
创建一个文字环绕圆形图片的布局。
请补全CSS代码，实现文字环绕圆形形状：
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 40px;
background: #f8f9fa;
}
.shape-demo {
margin: 30px 0;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.circular-image {
float: left;
width: 120px;
height: 120px;
margin: 0 20px 10px 0;
border-radius: 50%;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
/* 添加形状外侧属性 */
}
.text-content {
margin: 0;
}
</style>
</head>
<body>
<div class="shape-demo">
<div class="circular-image">图片</div>
<p class="text-content">
这段文字应该沿着圆形的轮廓流动，而不是简单地绕过一个矩形区域。
圆形浮动元素创造了一个流畅的视觉体验。
</p>
</div>
</body>
</html>练习7：综合效果挑战
创建一个具有多重视觉效果的卡片组件，综合运用所学技术。
创建一个综合视觉效果的卡片，要求包含：
- 圆角矩形剪切
- 渐变背景和混合模式
- 投影和模糊效果
- 文字环绕效果
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #f0f2f5;
padding: 40px;
font-family: Arial, sans-serif;
}
.advanced-card {
width: 350px;
height: 200px;
margin: 20px auto;
position: relative;
/* 添加剪切路径 */
background: linear-gradient(45deg, #667eea, #764ba2);
filter: /* 添加滤镜效果 */;
}
.card-content {
position: absolute;
top: 20px;
left: 20px;
color: white;
z-index: 2;
}
.floating-element {
position: absolute;
width: 80px;
height: 80px;
background: radial-gradient(circle, rgba(255,255,255,0.3), transparent);
border-radius: 50%;
top: 30px;
right: 30px;
/* 添加混合模式 */
}
</style>
</head>
<body>
<div class="advanced-card">
<div class="card-content">
<h3>高级卡片</h3>
<p>这个卡片展示了多种视觉效果的综合运用</p>
</div>
<div class="floating-element"></div>
</div>
</body>
</html>