CSS函数完全指南：掌握样式与动态效果
一、简介
CSS函数是预定义的功能模块，通过动态计算属性值（如calc()、rgb()、linear-gradient()、rotate()等）增强样式灵活性，支持颜色处理、布局调整、动画变形和滤镜效果，结合变量（var()）和响应式设计，实现高效、动态的网页样式控制。
二、颜色函数
| 函数 | 说明 | 示例 |
|---|---|---|
| rgb() | RGB颜色值 | rgb(255, 0, 0) |
| rgba() | 带透明度的RGB颜色值 | rgba(255, 0, 0, 0.5) |
| hsl() | HSL颜色值 | hsl(120, 100%, 50%) |
| hsla() | 带透明度的HSL颜色值 | hsla(120, 100%, 50%, 0.3) |
| hwb() | HWB颜色值 | hwb(180, 20%, 30%) |
| lab() | LAB颜色值 | lab(80% -50 50) |
| lch() | LCH颜色值 | lch(80% 50 250) |
| color() | 指定颜色空间的颜色 | color(display-p3 1 0 0) |
| color-mix() | 混合两种颜色 | color-mix(red, blue) |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 颜色函数示例</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.color-box {
padding: 20px;
border-radius: 8px;
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 80px;
}
/* RGB 颜色函数示例 */
.rgb {
background-color: rgb(255, 0, 0);
}
.rgba {
background-color: rgba(255, 0, 0, 0.5);
color: black;
text-shadow: none;
}
/* HSL 颜色函数示例 */
.hsl {
background-color: hsl(120, 100%, 50%);
}
.hsla {
background-color: hsla(120, 100%, 50%, 0.3);
color: black;
text-shadow: none;
}
/* HWB 颜色函数示例 */
.hwb {
background-color: hwb(180 20% 30%);
color: black;
}
/* LAB 颜色函数示例 */
.lab {
background-color: lab(80% -50 50);
}
/* LCH 颜色函数示例 */
.lch {
background-color: lch(80% 50 250);
}
/* color() 函数示例 */
.color-display-p3 {
background-color: color(display-p3 1 0 0);
}
/* color-mix() 函数示例 */
.color-mix {
background-color: color-mix(in srgb, red 50%, blue 50%);
}
</style>
</head>
<body>
<div class="color-box rgb">
<h3>rgb(255, 0, 0)</h3>
<p>纯红色</p>
</div>
<div class="color-box rgba">
<h3>rgba(255, 0, 0, 0.5)</h3>
<p>半透明红色</p>
</div>
<div class="color-box hsl">
<h3>hsl(120, 100%, 50%)</h3>
<p>纯绿色</p>
</div>
<div class="color-box hsla">
<h3>hsla(120, 100%, 50%, 0.3)</h3>
<p>半透明绿色</p>
</div>
<div class="color-box hwb">
<h3>hwb(180 20% 30%)</h3>
<p>青色调，20%白度，30%黑度</p>
</div>
<div class="color-box lab">
<h3>lab(80% -50 50)</h3>
<p>LAB 颜色空间</p>
</div>
<div class="color-box lch">
<h3>lch(80% 50 250)</h3>
<p>LCH 颜色空间</p>
</div>
<div class="color-box color-display-p3">
<h3>color(display-p3 1 0 0)</h3>
<p>Display P3 色域的红色</p>
</div>
<div class="color-box color-mix">
<h3>color-mix(in srgb, red 50%, blue 50%)</h3>
<p>红色和蓝色混合</p>
</div>
</body>
</html>
三、数学函数
| 函数 | 说明 | 示例 |
|---|---|---|
| calc() | 动态计算值 | calc(100% - 20px) |
| min() | 取最小值 | min(100px, 50vw) |
| max() | 取最大值 | max(200px, 30vh) |
| clamp() | 限制在最小和最大值之间 | clamp(1rem, 2.5vw, 2rem) |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 数学函数网格展示</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
padding: 20px;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
text-align: center;
margin-bottom: 30px;
font-size: clamp(1.8rem, 4vw, 2.5rem);
color: #2c3e50;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.function-card {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 25px;
display: flex;
flex-direction: column;
height: 100%;
}
h2 {
margin-bottom: 15px;
font-size: clamp(1.3rem, 2.5vw, 1.6rem);
}
.description {
margin-bottom: 20px;
color: #7f8c8d;
flex-grow: 1;
}
/* calc() 示例 */
.calc-box {
width: calc(100% - 60px);
height: 120px;
background-color: #1abc9c;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
border-radius: 4px;
}
/* min() 示例 */
.min-box {
width: min(100%, 500px);
height: 120px;
background-color: #3498db;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
border-radius: 4px;
}
/* max() 示例 */
.max-box {
width: max(300px, 70%);
height: 120px;
background-color: #e74c3c;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
border-radius: 4px;
}
/* clamp() 示例 */
.clamp-box {
width: clamp(300px, 80%, 600px);
height: 120px;
background-color: #9b59b6;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
border-radius: 4px;
}
.code-example {
background-color: #f8f9fa;
padding: 12px;
border-radius: 4px;
font-family: 'Courier New', Courier, monospace;
margin: 15px 0;
overflow-x: auto;
font-size: 0.9rem;
}
.function-title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.function-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 1.2rem;
}
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<h1>CSS 数学函数网格展示</h1>
<div class="grid-container">
<!-- calc() 函数卡片 -->
<div class="function-card">
<div class="function-title">
<div class="function-icon" style="background-color: #1abc9c;">C</div>
<h2>calc() 函数</h2>
</div>
<p class="description">动态计算值，可以在计算中使用不同的单位（如px, %, vw等混合计算）。</p>
<div class="code-example">
width: calc(100% - 60px);
</div>
<div class="calc-box">
宽度 = 父容器宽度 - 60px
</div>
</div>
<!-- min() 函数卡片 -->
<div class="function-card">
<div class="function-title">
<div class="function-icon" style="background-color: #3498db;">min</div>
<h2>min() 函数</h2>
</div>
<p class="description">从一组值中选择最小的值，常用于响应式设计中限制最大尺寸。</p>
<div class="code-example">
width: min(100%, 500px);
</div>
<div class="min-box">
宽度 ≤ 100% 且 ≤ 500px
</div>
</div>
<!-- max() 函数卡片 -->
<div class="function-card">
<div class="function-title">
<div class="function-icon" style="background-color: #e74c3c;">max</div>
<h2>max() 函数</h2>
</div>
<p class="description">从一组值中选择最大的值，常用于设置最小尺寸保证可读性。</p>
<div class="code-example">
width: max(300px, 70%);
</div>
<div class="max-box">
宽度 ≥ 300px 且 ≥ 70%
</div>
</div>
<!-- clamp() 函数卡片 -->
<div class="function-card">
<div class="function-title">
<div class="function-icon" style="background-color: #9b59b6;">C</div>
<h2>clamp() 函数</h2>
</div>
<p class="description">将一个值限制在最小和最大值之间，中间值为理想值，非常适合响应式设计。</p>
<div class="code-example">
width: clamp(300px, 80%, 600px);
</div>
<div class="clamp-box">
300px ≤ 宽度 ≤ 600px<br>理想值80%
</div>
</div>
</div>
</div>
</body>
</html>
四、形状函数
| 函数 | 说明 | 示例 |
|---|---|---|
| circle() | 定义圆形 | circle(50% at 50% 50%) |
| ellipse() | 定义椭圆形 | ellipse(100px 50px at center) |
| inset() | 定义内嵌矩形 | inset(10px 20px 30px 40px) |
| polygon() | 定义多边形 | polygon(0 0, 100% 0, 50% 100%) |
| path() | 定义SVG路径形状 | path(‘M 0 0 L 100 100 L 0 100 Z’) |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 形状函数网格展示</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
padding: 20px;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
h1 {
text-align: center;
margin-bottom: 30px;
font-size: clamp(1.8rem, 4vw, 2.5rem);
color: #2c3e50;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.shape-card {
background-color: white;
border-radius: 10px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
padding: 25px;
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.3s ease;
}
.shape-card:hover {
transform: translateY(-5px);
}
h2 {
margin-bottom: 15px;
font-size: 1.4rem;
color: #2c3e50;
text-align: center;
}
.description {
margin-bottom: 20px;
color: #7f8c8d;
text-align: center;
font-size: 0.95rem;
}
.shape-container {
width: 250px;
height: 250px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f9fa;
border-radius: 8px;
}
.shape {
background-color: #3498db;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
}
/* circle() 示例 */
.circle-shape {
width: 200px;
height: 200px;
clip-path: circle(50% at 50% 50%);
}
/* ellipse() 示例 */
.ellipse-shape {
width: 220px;
height: 180px;
clip-path: ellipse(50% 40% at 50% 50%);
}
/* inset() 示例 */
.inset-shape {
width: 200px;
height: 200px;
clip-path: inset(20px 30px 40px 50px round 15px);
}
/* polygon() 示例 */
.polygon-shape {
width: 200px;
height: 200px;
clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
/* path() 示例 */
.path-shape {
width: 200px;
height: 200px;
clip-path: path('M 0 50 C 50 0 100 0 150 50 C 200 100 200 150 150 200 C 100 250 50 250 0 200 C -50 150 -50 100 0 50 Z');
}
.code-example {
background-color: #2c3e50;
color: #ecf0f1;
padding: 12px;
border-radius: 6px;
font-family: 'Courier New', Courier, monospace;
margin: 10px 0;
overflow-x: auto;
font-size: 0.85rem;
width: 100%;
text-align: center;
}
@media (max-width: 1200px) {
.grid-container {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.shape-container {
width: 200px;
height: 200px;
}
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<h1>CSS 形状函数网格展示</h1>
<div class="grid-container">
<!-- circle() 函数卡片 -->
<div class="shape-card">
<h2>circle() 函数</h2>
<p class="description">定义一个圆形区域，常用于创建圆形裁剪效果</p>
<div class="shape-container">
<div class="shape circle-shape">圆形</div>
</div>
<div class="code-example">
clip-path: circle(50% at 50% 50%);
</div>
</div>
<!-- ellipse() 函数卡片 -->
<div class="shape-card">
<h2>ellipse() 函数</h2>
<p class="description">定义一个椭圆形区域，可以指定水平和垂直半径</p>
<div class="shape-container">
<div class="shape ellipse-shape">椭圆形</div>
</div>
<div class="code-example">
clip-path: ellipse(50% 40% at 50% 50%);
</div>
</div>
<!-- inset() 函数卡片 -->
<div class="shape-card">
<h2>inset() 函数</h2>
<p class="description">定义一个内嵌矩形，可以设置圆角创建圆角矩形效果</p>
<div class="shape-container">
<div class="shape inset-shape">内嵌矩形<br>带圆角</div>
</div>
<div class="code-example">
clip-path: inset(20px 30px 40px 50px round 15px);
</div>
</div>
<!-- polygon() 函数卡片 -->
<div class="shape-card">
<h2>polygon() 函数</h2>
<p class="description">定义一个多边形区域，通过坐标点创建任意形状</p>
<div class="shape-container">
<div class="shape polygon-shape">五边形</div>
</div>
<div class="code-example">
clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
</div>
</div>
<!-- path() 函数卡片 -->
<div class="shape-card">
<h2>path() 函数</h2>
<p class="description">使用SVG路径语法定义复杂形状，提供最大的灵活性</p>
<div class="shape-container">
<div class="shape path-shape">心形</div>
</div>
<div class="code-example">
clip-path: path('M 0 50 C 50 0 100 0 150 50 C 200 100 200 150 150 200 C 100 250 50 250 0 200 C -50 150 -50 100 0 50 Z');
</div>
</div>
</div>
</div>
</body>
</html>
五、变换函数
| 函数 | 说明 | 示例 |
|---|---|---|
| matrix() | 2D变换矩阵 | matrix(1, 0, 0, 1, 100, 50) |
| matrix3d() | 3D变换矩阵 | matrix3d(1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,1) |
| perspective() | 设置透视距离 | perspective(500px) |
| rotate() | 旋转 | rotate(45deg) |
| rotate3d() | 3D旋转 | rotate3d(1, 1, 0, 45deg) |
| rotateX() | 绕X轴旋转 | rotateX(30deg) |
| rotateY() | 绕Y轴旋转 | rotateY(60deg) |
| rotateZ() | 绕Z轴旋转 | rotateZ(90deg) |
| scale() | 缩放 | scale(1.5) |
| scale3d() | 3D缩放 | scale3d(1.2, 1.2, 1.5) |
| scaleX() | X轴缩放 | scaleX(2) |
| scaleY() | Y轴缩放 | scaleY(0.5) |
| scaleZ() | Z轴缩放 | scaleZ(1.8) |
| skew() | 倾斜 | skew(15deg, 10deg) |
| skewX() | X轴倾斜 | skewX(20deg) |
| skewY() | Y轴倾斜 | skewY(30deg) |
| translate() | 平移 | translate(50px, 20px) |
| translate3d() | 3D平移 | translate3d(50px, 20px, 100px) |
| translateX() | X轴平移 | translateX(100px) |
| translateY() | Y轴平移 | translateY(50px) |
| translateZ() | Z轴平移 | translateZ(200px) |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 变换函数展示</title>
<style>
:root {
--primary: #3498db;
--secondary: #2ecc71;
--accent: #e74c3c;
--dark: #2c3e50;
--light: #ecf0f1;
--gray: #95a5a6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
padding: 20px;
background-color: #f5f9fc;
color: var(--dark);
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 40px;
}
h1 {
font-size: 2.2rem;
margin-bottom: 10px;
color: var(--dark);
position: relative;
display: inline-block;
}
h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 2px;
}
.subtitle {
color: var(--gray);
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-bottom: 50px;
}
.card {
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
padding: 25px;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
height: 100%;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.card:hover::before {
transform: scaleX(1);
}
.card-header {
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.card:hover .card-header {
transform: translateY(-5px);
}
.card-title {
font-size: 1.3rem;
color: var(--dark);
margin-bottom: 5px;
transition: all 0.3s ease;
}
.card:hover .card-title {
color: var(--primary);
}
.card-subtitle {
font-size: 0.85rem;
color: var(--gray);
font-weight: 500;
transition: all 0.3s ease;
}
.card:hover .card-subtitle {
color: var(--dark);
}
.demo-container {
width: 100%;
height: 180px;
margin: 15px 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #f8fafc;
border-radius: 8px;
position: relative;
overflow: hidden;
perspective: 1000px;
transition: all 0.3s ease;
}
.card:hover .demo-container {
background-color: #f0f4f8;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}
.demo-box {
width: 100px;
height: 100px;
background: linear-gradient(45deg, var(--primary), var(--secondary));
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border-radius: 4px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
position: relative;
overflow: hidden;
}
.demo-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
opacity: 0;
transition: opacity 0.3s ease;
}
.demo-box:hover::before {
opacity: 1;
}
.demo-box:hover {
transform: var(--transform-value) scale(1.05);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.code {
background-color: var(--dark);
color: var(--light);
padding: 12px;
border-radius: 6px;
font-family: 'Courier New', Courier, monospace;
font-size: 0.85rem;
margin-top: auto;
position: relative;
overflow-x: auto;
transition: all 0.3s ease;
}
.card:hover .code {
background-color: #1a2634;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.code::before {
content: 'CSS';
position: absolute;
top: -10px;
right: 15px;
background-color: var(--accent);
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.7rem;
font-weight: bold;
transition: all 0.3s ease;
}
.card:hover .code::before {
transform: translateY(-3px);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
/* 变换效果 */
.matrix .demo-box { --transform-value: matrix(1, 0.3, 0.2, 1, 20, 20); }
.matrix3d .demo-box { --transform-value: matrix3d(1,0,0,0,0,1,0.6,0,0,0,1,0,50,0,0,1); }
.perspective .demo-box { --transform-value: perspective(500px) rotateY(45deg); }
.rotate .demo-box { --transform-value: rotate(45deg); }
.rotate3d .demo-box { --transform-value: rotate3d(1, 1, 0, 60deg); }
.rotateX .demo-box { --transform-value: rotateX(45deg); }
.rotateY .demo-box { --transform-value: rotateY(45deg); }
.rotateZ .demo-box { --transform-value: rotateZ(45deg); }
.scale .demo-box { --transform-value: scale(1.5); }
.scale3d .demo-box { --transform-value: scale3d(1.2, 1.5, 1); }
.scaleX .demo-box { --transform-value: scaleX(1.5); }
.scaleY .demo-box { --transform-value: scaleY(1.5); }
.scaleZ .demo-box { --transform-value: perspective(500px) scaleZ(3) rotateX(45deg); }
.skew .demo-box { --transform-value: skew(20deg, 10deg); }
.skewX .demo-box { --transform-value: skewX(20deg); }
.skewY .demo-box { --transform-value: skewY(20deg); }
.translate .demo-box { --transform-value: translate(30px, 20px); }
.translate3d .demo-box { --transform-value: translate3d(30px, 20px, 50px); }
.translateX .demo-box { --transform-value: translateX(40px); }
.translateY .demo-box { --transform-value: translateY(40px); }
.translateZ .demo-box { --transform-value: perspective(500px) translateZ(100px); }
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>CSS 变换函数</h1>
<p class="subtitle">探索CSS中各种变换函数的视觉效果和实现方式</p>
</header>
<div class="grid">
<!-- 2D变换 -->
<div class="card matrix">
<div class="card-header">
<h3 class="card-title">matrix()</h3>
<p class="card-subtitle">2D变换矩阵</p>
</div>
<div class="demo-container">
<div class="demo-box">2D矩阵</div>
</div>
<pre class="code">transform: matrix(1, 0.3, 0.2, 1, 20, 20);</pre>
</div>
<div class="card rotate">
<div class="card-header">
<h3 class="card-title">rotate()</h3>
<p class="card-subtitle">2D旋转</p>
</div>
<div class="demo-container">
<div class="demo-box">旋转</div>
</div>
<pre class="code">transform: rotate(45deg);</pre>
</div>
<div class="card scale">
<div class="card-header">
<h3 class="card-title">scale()</h3>
<p class="card-subtitle">2D缩放</p>
</div>
<div class="demo-container">
<div class="demo-box">缩放</div>
</div>
<pre class="code">transform: scale(1.5);</pre>
</div>
<div class="card skew">
<div class="card-header">
<h3 class="card-title">skew()</h3>
<p class="card-subtitle">2D倾斜</p>
</div>
<div class="demo-container">
<div class="demo-box">倾斜</div>
</div>
<pre class="code">transform: skew(20deg, 10deg);</pre>
</div>
<div class="card translate">
<div class="card-header">
<h3 class="card-title">translate()</h3>
<p class="card-subtitle">2D平移</p>
</div>
<div class="demo-container">
<div class="demo-box">平移</div>
</div>
<pre class="code">transform: translate(30px, 20px);</pre>
</div>
<!-- 3D变换 -->
<div class="card matrix3d">
<div class="card-header">
<h3 class="card-title">matrix3d()</h3>
<p class="card-subtitle">3D变换矩阵</p>
</div>
<div class="demo-container">
<div class="demo-box">3D矩阵</div>
</div>
<pre class="code">transform: matrix3d(1,0,0,0,0,1,0.6,0,0,0,1,0,50,0,0,1);</pre>
</div>
<div class="card perspective">
<div class="card-header">
<h3 class="card-title">perspective()</h3>
<p class="card-subtitle">3D透视</p>
</div>
<div class="demo-container">
<div class="demo-box">透视</div>
</div>
<pre class="code">transform: perspective(500px) rotateY(45deg);</pre>
</div>
<div class="card rotate3d">
<div class="card-header">
<h3 class="card-title">rotate3d()</h3>
<p class="card-subtitle">3D旋转</p>
</div>
<div class="demo-container">
<div class="demo-box">3D旋转</div>
</div>
<pre class="code">transform: rotate3d(1, 1, 0, 60deg);</pre>
</div>
<div class="card rotateX">
<div class="card-header">
<h3 class="card-title">rotateX()</h3>
<p class="card-subtitle">X轴旋转</p>
</div>
<div class="demo-container">
<div class="demo-box">X轴</div>
</div>
<pre class="code">transform: rotateX(45deg);</pre>
</div>
<div class="card rotateY">
<div class="card-header">
<h3 class="card-title">rotateY()</h3>
<p class="card-subtitle">Y轴旋转</p>
</div>
<div class="demo-container">
<div class="demo-box">Y轴</div>
</div>
<pre class="code">transform: rotateY(45deg);</pre>
</div>
<div class="card rotateZ">
<div class="card-header">
<h3 class="card-title">rotateZ()</h3>
<p class="card-subtitle">Z轴旋转</p>
</div>
<div class="demo-container">
<div class="demo-box">Z轴</div>
</div>
<pre class="code">transform: rotateZ(45deg);</pre>
</div>
<div class="card scale3d">
<div class="card-header">
<h3 class="card-title">scale3d()</h3>
<p class="card-subtitle">3D缩放</p>
</div>
<div class="demo-container">
<div class="demo-box">3D缩放</div>
</div>
<pre class="code">transform: scale3d(1.2, 1.5, 1);</pre>
</div>
<div class="card scaleX">
<div class="card-header">
<h3 class="card-title">scaleX()</h3>
<p class="card-subtitle">X轴缩放</p>
</div>
<div class="demo-container">
<div class="demo-box">X轴</div>
</div>
<pre class="code">transform: scaleX(1.5);</pre>
</div>
<div class="card scaleY">
<div class="card-header">
<h3 class="card-title">scaleY()</h3>
<p class="card-subtitle">Y轴缩放</p>
</div>
<div class="demo-container">
<div class="demo-box">Y轴</div>
</div>
<pre class="code">transform: scaleY(1.5);</pre>
</div>
<div class="card scaleZ">
<div class="card-header">
<h3 class="card-title">scaleZ()</h3>
<p class="card-subtitle">Z轴缩放</p>
</div>
<div class="demo-container">
<div class="demo-box">Z轴</div>
</div>
<pre class="code">transform: perspective(500px) scaleZ(3) rotateX(45deg);</pre>
</div>
<div class="card skewX">
<div class="card-header">
<h3 class="card-title">skewX()</h3>
<p class="card-subtitle">X轴倾斜</p>
</div>
<div class="demo-container">
<div class="demo-box">X轴</div>
</div>
<pre class="code">transform: skewX(20deg);</pre>
</div>
<div class="card skewY">
<div class="card-header">
<h3 class="card-title">skewY()</h3>
<p class="card-subtitle">Y轴倾斜</p>
</div>
<div class="demo-container">
<div class="demo-box">Y轴</div>
</div>
<pre class="code">transform: skewY(20deg);</pre>
</div>
<div class="card translate3d">
<div class="card-header">
<h3 class="card-title">translate3d()</h3>
<p class="card-subtitle">3D平移</p>
</div>
<div class="demo-container">
<div class="demo-box">3D平移</div>
</div>
<pre class="code">transform: translate3d(30px, 20px, 50px);</pre>
</div>
<div class="card translateX">
<div class="card-header">
<h3 class="card-title">translateX()</h3>
<p class="card-subtitle">X轴平移</p>
</div>
<div class="demo-container">
<div class="demo-box">X轴</div>
</div>
<pre class="code">transform: translateX(40px);</pre>
</div>
<div class="card translateY">
<div class="card-header">
<h3 class="card-title">translateY()</h3>
<p class="card-subtitle">Y轴平移</p>
</div>
<div class="demo-container">
<div class="demo-box">Y轴</div>
</div>
<pre class="code">transform: translateY(40px);</pre>
</div>
<div class="card translateZ">
<div class="card-header">
<h3 class="card-title">translateZ()</h3>
<p class="card-subtitle">Z轴平移</p>
</div>
<div class="demo-container">
<div class="demo-box">Z轴</div>
</div>
<pre class="code">transform: perspective(500px) translateZ(100px);</pre>
</div>
</div>
</div>
<script>
// 添加动画效果：卡片顺序出现
document.querySelectorAll('.card').forEach((card, index) => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
setTimeout(() => {
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, 100 + (index % 4) * 100);
});
// 添加点击效果：点击演示框时放大效果
document.querySelectorAll('.demo-box').forEach(box => {
box.addEventListener('click', function() {
this.style.transform = this.style.transform.includes('scale(1.1)')
? this.style.transform.replace('scale(1.1)', 'scale(1.05)')
: this.style.transform + ' scale(1.1)';
});
});
</script>
</body>
</html>
六、渐变函数
| 函数 | 说明 | 示例 |
|---|---|---|
| linear-gradient() | 线性渐变 | linear-gradient(45deg, red, blue) |
| radial-gradient() | 径向渐变 | radial-gradient(circle, red, yellow) |
| conic-gradient() | 锥形渐变 | conic-gradient(red, yellow, green) |
| repeating-linear-gradient() | 重复线性渐变 | repeating-linear-gradient(45deg, red 0 10%, blue 10% 20%) |
| repeating-radial-gradient() | 重复径向渐变 | repeating-radial-gradient(circle, red 0 10%, blue 10% 20%) |
| repeating-conic-gradient() | 重复锥形渐变 | repeating-conic-gradient(red 0 10%, blue 10% 20%) |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 渐变函数展示</title>
<style>
:root {
--primary: #3498db;
--secondary: #2ecc71;
--accent: #e74c3c;
--dark: #2c3e50;
--light: #ecf0f1;
--gray: #95a5a6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
padding: 20px;
background-color: #f5f9fc;
color: var(--dark);
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 40px;
}
h1 {
font-size: 2.2rem;
margin-bottom: 10px;
color: var(--dark);
position: relative;
display: inline-block;
}
h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 2px;
}
.subtitle {
color: var(--gray);
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.gradient-card {
background: white;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
padding: 25px;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
overflow: hidden;
}
.gradient-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.card-header {
margin-bottom: 20px;
}
.card-title {
font-size: 1.4rem;
color: var(--dark);
margin-bottom: 5px;
}
.card-subtitle {
font-size: 0.9rem;
color: var(--gray);
}
.gradient-preview {
width: 100%;
height: 200px;
border-radius: 8px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 1.2rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: all 0.5s ease;
}
.gradient-card:hover .gradient-preview {
transform: scale(0.98);
}
.code {
background-color: var(--dark);
color: var(--light);
padding: 15px;
border-radius: 8px;
font-family: 'Courier New', Courier, monospace;
font-size: 0.9rem;
margin-top: auto;
position: relative;
overflow-x: auto;
}
.code::before {
content: 'CSS';
position: absolute;
top: -10px;
right: 15px;
background-color: var(--accent);
color: white;
padding: 2px 10px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: bold;
}
/* 渐变效果 */
.linear .gradient-preview {
background: linear-gradient(45deg, #ff3366, #ba265d, #3a1c71);
}
.radial .gradient-preview {
background: radial-gradient(circle at center, #ff3366, #ba265d, #3a1c71);
}
.conic .gradient-preview {
background: conic-gradient(#ff3366, #ba265d, #3a1c71, #ff3366);
}
.repeating-linear .gradient-preview {
background: repeating-linear-gradient(45deg,
#ff3366 0 10%,
#ba265d 10% 20%,
#3a1c71 20% 30%);
}
.repeating-radial .gradient-preview {
background: repeating-radial-gradient(circle at center,
#ff3366 0 10%,
#ba265d 10% 20%,
#3a1c71 20% 30%);
}
.repeating-conic .gradient-preview {
background: repeating-conic-gradient(
#ff3366 0 10%,
#ba265d 10% 20%,
#3a1c71 20% 30%);
}
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>CSS 渐变函数</h1>
<p class="subtitle">探索CSS中各种渐变函数的视觉效果和实现方式</p>
</header>
<div class="grid">
<!-- 线性渐变 -->
<div class="gradient-card linear">
<div class="card-header">
<h3 class="card-title">linear-gradient()</h3>
<p class="card-subtitle">线性渐变 - 沿直线方向颜色过渡</p>
</div>
<div class="gradient-preview">45° 线性渐变</div>
<pre class="code">background: linear-gradient(45deg, #ff3366, #ba265d, #3a1c71);</pre>
</div>
<!-- 径向渐变 -->
<div class="gradient-card radial">
<div class="card-header">
<h3 class="card-title">radial-gradient()</h3>
<p class="card-subtitle">径向渐变 - 从中心向外辐射的颜色过渡</p>
</div>
<div class="gradient-preview">圆形径向渐变</div>
<pre class="code">background: radial-gradient(circle at center, #ff3366, #ba265d, #3a1c71);</pre>
</div>
<!-- 锥形渐变 -->
<div class="gradient-card conic">
<div class="card-header">
<h3 class="card-title">conic-gradient()</h3>
<p class="card-subtitle">锥形渐变 - 围绕中心点旋转的颜色过渡</p>
</div>
<div class="gradient-preview">锥形渐变</div>
<pre class="code">background: conic-gradient(#ff3366, #ba265d, #3a1c71, #ff3366);</pre>
</div>
<!-- 重复线性渐变 -->
<div class="gradient-card repeating-linear">
<div class="card-header">
<h3 class="card-title">repeating-linear-gradient()</h3>
<p class="card-subtitle">重复线性渐变 - 线性渐变的重复模式</p>
</div>
<div class="gradient-preview">重复线性渐变</div>
<pre class="code">background: repeating-linear-gradient(45deg,
#ff3366 0 10%,
#ba265d 10% 20%,
#3a1c71 20% 30%);</pre>
</div>
<!-- 重复径向渐变 -->
<div class="gradient-card repeating-radial">
<div class="card-header">
<h3 class="card-title">repeating-radial-gradient()</h3>
<p class="card-subtitle">重复径向渐变 - 径向渐变的重复模式</p>
</div>
<div class="gradient-preview">重复径向渐变</div>
<pre class="code">background: repeating-radial-gradient(circle at center,
#ff3366 0 10%,
#ba265d 10% 20%,
#3a1c71 20% 30%);</pre>
</div>
<!-- 重复锥形渐变 -->
<div class="gradient-card repeating-conic">
<div class="card-header">
<h3 class="card-title">repeating-conic-gradient()</h3>
<p class="card-subtitle">重复锥形渐变 - 锥形渐变的重复模式</p>
</div>
<div class="gradient-preview">重复锥形渐变</div>
<pre class="code">background: repeating-conic-gradient(
#ff3366 0 10%,
#ba265d 10% 20%,
#3a1c71 20% 30%);</pre>
</div>
</div>
</div>
<script>
// 添加动画效果：卡片顺序出现
document.querySelectorAll('.gradient-card').forEach((card, index) => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
setTimeout(() => {
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, 100 + (index % 2) * 100);
});
// 添加点击效果：点击渐变预览时改变颜色
const colors = [
['#ff3366', '#ba265d', '#3a1c71'],
['#4e54c8', '#8f94fb', '#4776E6'],
['#11998e', '#38ef7d', '#1FA2FF'],
['#ff416c', '#ff4b2b', '#FF512F'],
['#8E2DE2', '#4A00E0', '#9400D3'],
['#00c6ff', '#0072ff', '#00B4DB']
];
document.querySelectorAll('.gradient-preview').forEach((preview, index) => {
preview.addEventListener('click', function() {
const currentColors = colors[(colors.indexOf(
Array.from(this.style.background.matchAll(/#[0-9a-f]{6}/g)).map(m => m[0])) + 1) % colors.length];
if (this.parentElement.classList.contains('linear')) {
this.style.background = `linear-gradient(45deg, ${currentColors.join(', ')})`;
this.parentElement.querySelector('.code').textContent =
`background: linear-gradient(45deg, ${currentColors.join(', ')});`;
} else if (this.parentElement.classList.contains('radial')) {
this.style.background = `radial-gradient(circle at center, ${currentColors.join(', ')})`;
this.parentElement.querySelector('.code').textContent =
`background: radial-gradient(circle at center, ${currentColors.join(', ')});`;
} else if (this.parentElement.classList.contains('conic')) {
this.style.background = `conic-gradient(${currentColors.join(', ')}, ${currentColors[0]})`;
this.parentElement.querySelector('.code').textContent =
`background: conic-gradient(${currentColors.join(', ')}, ${currentColors[0]});`;
} else if (this.parentElement.classList.contains('repeating-linear')) {
this.style.background = `repeating-linear-gradient(45deg,
${currentColors[0]} 0 10%,
${currentColors[1]} 10% 20%,
${currentColors[2]} 20% 30%)`;
this.parentElement.querySelector('.code').textContent =
`background: repeating-linear-gradient(45deg,
${currentColors[0]} 0 10%,
${currentColors[1]} 10% 20%,
${currentColors[2]} 20% 30%);`;
} else if (this.parentElement.classList.contains('repeating-radial')) {
this.style.background = `repeating-radial-gradient(circle at center,
${currentColors[0]} 0 10%,
${currentColors[1]} 10% 20%,
${currentColors[2]} 20% 30%)`;
this.parentElement.querySelector('.code').textContent =
`background: repeating-radial-gradient(circle at center,
${currentColors[0]} 0 10%,
${currentColors[1]} 10% 20%,
${currentColors[2]} 20% 30%);`;
} else if (this.parentElement.classList.contains('repeating-conic')) {
this.style.background = `repeating-conic-gradient(
${currentColors[0]} 0 10%,
${currentColors[1]} 10% 20%,
${currentColors[2]} 20% 30%)`;
this.parentElement.querySelector('.code').textContent =
`background: repeating-conic-gradient(
${currentColors[0]} 0 10%,
${currentColors[1]} 10% 20%,
${currentColors[2]} 20% 30%);`;
}
});
});
</script>
</body>
</html>
七、图像函数
| 函数 | 说明 | 示例 |
|---|---|---|
| url() | 引用外部资源 | url(“image.jpg”) |
| image-set() | 根据设备分辨率或类型提供适配的图像源 | image-set(“image-1x.jpg” 1x, “image-2x.jpg” 2x) |
| cross-fade() | 图像混合 | cross-fade(50% url(a.png), url(b.png)) |
| element() | 引用页面元素作为图像 | element(#my-element) |
| paint() | 使用Paint Worklet绘制图像 | paint(myPainter) |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 图像函数展示</title>
<style>
:root {
--primary: #3498db;
--secondary: #2ecc71;
--accent: #e74c3c;
--dark: #2c3e50;
--light: #ecf0f1;
--gray: #95a5a6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
padding: 20px;
background-color: #f5f9fc;
color: var(--dark);
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 40px;
}
h1 {
font-size: 2.2rem;
margin-bottom: 10px;
color: var(--dark);
position: relative;
display: inline-block;
}
h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 2px;
}
.subtitle {
color: var(--gray);
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.image-card {
background: white;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
padding: 25px;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
overflow: hidden;
}
.image-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.card-header {
margin-bottom: 20px;
}
.card-title {
font-size: 1.3rem;
color: var(--dark);
margin-bottom: 5px;
}
.card-subtitle {
font-size: 0.9rem;
color: var(--gray);
}
.image-preview {
width: 100%;
height: 200px;
border-radius: 8px;
margin-bottom: 20px;
background-color: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray);
font-weight: bold;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.image-card:hover .image-preview {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.code {
background-color: var(--dark);
color: var(--light);
padding: 15px;
border-radius: 8px;
font-family: 'Courier New', Courier, monospace;
font-size: 0.9rem;
margin-top: auto;
position: relative;
overflow-x: auto;
}
.code::before {
content: 'CSS';
position: absolute;
top: -10px;
right: 15px;
background-color: var(--accent);
color: white;
padding: 2px 10px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: bold;
}
/* 图像函数样式 */
.url .image-preview {
background: url('https://picsum.photos/400/300') center/cover;
color: white;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.image-set .image-preview {
background:
-webkit-image-set(
"https://picsum.photos/400/300?webp" 1x type("image/webp"),
"https://picsum.photos/800/600?webp" 2x type("image/webp"),
"https://picsum.photos/400/300" 1x type("image/jpeg"),
"https://picsum.photos/800/600" 2x type("image/jpeg")
) center/cover;
color: white;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.cross-fade .image-preview {
background:
-webkit-cross-fade(
url('https://picsum.photos/400/300?grayscale'),
url('https://picsum.photos/400/300?blur'),
50%
) center/cover;
color: white;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.element .image-preview {
background: -moz-element(#demo-element) center/cover;
color: var(--dark);
}
.paint .image-preview {
background: paint(checkerboard);
--size: 20;
--color1: var(--primary);
--color2: var(--secondary);
color: var(--dark);
}
#demo-element {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, var(--primary), var(--secondary));
color: white;
font-weight: bold;
}
@media (max-width: 1200px) {
.grid {
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
}
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>CSS 图像函数</h1>
<p class="subtitle">探索CSS中各种图像函数的视觉效果和实现方式</p>
</header>
<div id="demo-element" style="display: none;">
这是将被引用的元素内容
</div>
<div class="grid">
<!-- url() 函数 -->
<div class="image-card url">
<div class="card-header">
<h3 class="card-title">url()</h3>
<p class="card-subtitle">引用外部图像资源</p>
</div>
<div class="image-preview">url() 图像</div>
<pre class="code">background: url('https://picsum.photos/400/300') center/cover;</pre>
</div>
<!-- image-set() 函数 -->
<div class="image-card image-set">
<div class="card-header">
<h3 class="card-title">image-set()</h3>
<p class="card-subtitle">响应式图像资源选择</p>
</div>
<div class="image-preview">image-set() 图像</div>
<pre class="code">background: -webkit-image-set(
"https://picsum.photos/400/300?webp" 1x type("image/webp"),
"https://picsum.photos/800/600?webp" 2x type("image/webp"),
"https://picsum.photos/400/300" 1x type("image/jpeg"),
"https://picsum.photos/800/600" 2x type("image/jpeg")
) center/cover;</pre>
</div>
<!-- cross-fade() 函数 -->
<div class="image-card cross-fade">
<div class="card-header">
<h3 class="card-title">cross-fade()</h3>
<p class="card-subtitle">两张图像的混合效果</p>
</div>
<div class="image-preview">cross-fade() 混合</div>
<pre class="code">background: -webkit-cross-fade(
url('https://picsum.photos/400/300?grayscale'),
url('https://picsum.photos/400/300?blur'),
50%
) center/cover;</pre>
</div>
<!-- element() 函数 -->
<div class="image-card element">
<div class="card-header">
<h3 class="card-title">element()</h3>
<p class="card-subtitle">引用页面元素作为图像 (仅Firefox支持)</p>
</div>
<div class="image-preview">element() 引用</div>
<pre class="code">background: -moz-element(#demo-element) center/cover;</pre>
</div>
<!-- paint() 函数 -->
<div class="image-card paint">
<div class="card-header">
<h3 class="card-title">paint()</h3>
<p class="card-subtitle">使用Paint Worklet绘制图像</p>
</div>
<div class="image-preview">paint() 绘制</div>
<pre class="code">background: paint(checkerboard);
--size: 20;
--color1: #3498db;
--color2: #2ecc71;</pre>
</div>
</div>
</div>
<script>
// 注册Paint Worklet
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('data:application/javascript,' + encodeURIComponent(`
class CheckerboardPainter {
static get inputProperties() { return ['--size', '--color1', '--color2']; }
paint(ctx, size, properties) {
const sizeVal = parseInt(properties.get('--size')) || 10;
const color1 = properties.get('--color1').toString();
const color2 = properties.get('--color2').toString();
const w = size.width;
const h = size.height;
ctx.fillStyle = color1;
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = color2;
for (let y = 0; y < h/sizeVal; y++) {
for (let x = 0; x < w/sizeVal; x++) {
if ((x + y) % 2 === 0) {
ctx.fillRect(x * sizeVal, y * sizeVal, sizeVal, sizeVal);
}
}
}
}
}
registerPaint('checkerboard', CheckerboardPainter);
`));
} else {
document.querySelector('.paint .image-preview').textContent = '您的浏览器不支持Paint Worklet';
document.querySelector('.paint .image-preview').style.backgroundColor = '#f8fafc';
}
// 显示被引用的元素
document.getElementById('demo-element').style.display = 'flex';
</script>
</body>
</html>
八、滤镜函数
| 函数 | 说明 | 示例 | 取值范围 |
|---|---|---|---|
| blur() | 模糊效果 | blur(5px) | 0px - Npx |
| brightness() | 亮度调整 | brightness(1.5) | 0-1(暗) / 1(正常) / >1(亮) |
| contrast() | 对比度调整 | contrast(200%) | 0%-100%(低) / >100%(高) |
| drop-shadow() | 投影效果 | drop-shadow(2px 2px 5px black) | x偏移 y偏移 模糊半径 颜色 |
| grayscale() | 灰度效果 | grayscale(80%) | 0%(原图)-100%(完全灰度) |
| hue-rotate() | 色相旋转 | hue-rotate(90deg) | 0deg-360deg |
| invert() | 颜色反转 | invert(75%) | 0%(原图)-100%(完全反转) |
| opacity() | 透明度调整 | opacity(0.3) | 0(透明)-1(不透明) |
| saturate() | 饱和度调整 | saturate(2) | 0%(无饱和)-100%(原图)/>100% |
| sepia() | 褐色复古效果 | sepia(50%) | 0%(原图)-100%(完全褐色) |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 滤镜函数展示</title>
<style>
:root {
--primary: #3498db;
--secondary: #2ecc71;
--accent: #e74c3c;
--dark: #2c3e50;
--light: #ecf0f1;
--gray: #95a5a6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
padding: 20px;
background-color: #f5f9fc;
color: var(--dark);
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 40px;
}
h1 {
font-size: 2.2rem;
margin-bottom: 10px;
color: var(--dark);
position: relative;
display: inline-block;
}
h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 2px;
}
.subtitle {
color: var(--gray);
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-bottom: 50px;
}
.filter-card {
background: white;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
padding: 25px;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.filter-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.card-header {
margin-bottom: 15px;
}
.card-title {
font-size: 1.3rem;
color: var(--dark);
margin-bottom: 5px;
}
.card-subtitle {
font-size: 0.85rem;
color: var(--gray);
}
.filter-preview {
width: 100%;
height: 180px;
margin: 15px 0;
background: url('https://picsum.photos/400/300') center/cover;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}
.filter-preview::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
.filter-preview span {
position: relative;
z-index: 1;
}
.code {
background-color: var(--dark);
color: var(--light);
padding: 12px;
border-radius: 6px;
font-family: 'Courier New', Courier, monospace;
font-size: 0.85rem;
margin-top: auto;
position: relative;
overflow-x: auto;
}
.code::before {
content: 'CSS';
position: absolute;
top: -10px;
right: 15px;
background-color: var(--accent);
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.7rem;
font-weight: bold;
}
/* 滤镜效果 */
.blur .filter-preview {
filter: blur(5px);
}
.brightness .filter-preview {
filter: brightness(1.5);
}
.contrast .filter-preview {
filter: contrast(200%);
}
.drop-shadow .filter-preview {
filter: drop-shadow(2px 2px 5px black);
}
.grayscale .filter-preview {
filter: grayscale(80%);
}
.hue-rotate .filter-preview {
filter: hue-rotate(90deg);
}
.invert .filter-preview {
filter: invert(75%);
}
.opacity .filter-preview {
filter: opacity(0.3);
}
.saturate .filter-preview {
filter: saturate(2);
}
.sepia .filter-preview {
filter: sepia(50%);
}
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>CSS 滤镜函数</h1>
<p class="subtitle">探索CSS中各种滤镜函数的视觉效果和实现方式</p>
</header>
<div class="grid">
<!-- blur() -->
<div class="filter-card blur">
<div class="card-header">
<h3 class="card-title">blur()</h3>
<p class="card-subtitle">模糊效果 (0px-Npx)</p>
</div>
<div class="filter-preview"><span>模糊效果 5px</span></div>
<pre class="code">filter: blur(5px);</pre>
</div>
<!-- brightness() -->
<div class="filter-card brightness">
<div class="card-header">
<h3 class="card-title">brightness()</h3>
<p class="card-subtitle">亮度调整 (0-1->1)</p>
</div>
<div class="filter-preview"><span>亮度 1.5</span></div>
<pre class="code">filter: brightness(1.5);</pre>
</div>
<!-- contrast() -->
<div class="filter-card contrast">
<div class="card-header">
<h3 class="card-title">contrast()</h3>
<p class="card-subtitle">对比度调整 (0%-100%->100%)</p>
</div>
<div class="filter-preview"><span>对比度 200%</span></div>
<pre class="code">filter: contrast(200%);</pre>
</div>
<!-- drop-shadow() -->
<div class="filter-card drop-shadow">
<div class="card-header">
<h3 class="card-title">drop-shadow()</h3>
<p class="card-subtitle">投影效果 (x y blur color)</p>
</div>
<div class="filter-preview"><span>投影效果</span></div>
<pre class="code">filter: drop-shadow(2px 2px 5px black);</pre>
</div>
<!-- grayscale() -->
<div class="filter-card grayscale">
<div class="card-header">
<h3 class="card-title">grayscale()</h3>
<p class="card-subtitle">灰度效果 (0%-100%)</p>
</div>
<div class="filter-preview"><span>灰度 80%</span></div>
<pre class="code">filter: grayscale(80%);</pre>
</div>
<!-- hue-rotate() -->
<div class="filter-card hue-rotate">
<div class="card-header">
<h3 class="card-title">hue-rotate()</h3>
<p class="card-subtitle">色相旋转 (0deg-360deg)</p>
</div>
<div class="filter-preview"><span>色相旋转 90deg</span></div>
<pre class="code">filter: hue-rotate(90deg);</pre>
</div>
<!-- invert() -->
<div class="filter-card invert">
<div class="card-header">
<h3 class="card-title">invert()</h3>
<p class="card-subtitle">颜色反转 (0%-100%)</p>
</div>
<div class="filter-preview"><span>反转 75%</span></div>
<pre class="code">filter: invert(75%);</pre>
</div>
<!-- opacity() -->
<div class="filter-card opacity">
<div class="card-header">
<h3 class="card-title">opacity()</h3>
<p class="card-subtitle">透明度 (0-1)</p>
</div>
<div class="filter-preview"><span>透明度 0.3</span></div>
<pre class="code">filter: opacity(0.3);</pre>
</div>
<!-- saturate() -->
<div class="filter-card saturate">
<div class="card-header">
<h3 class="card-title">saturate()</h3>
<p class="card-subtitle">饱和度 (0%-100%->100%)</p>
</div>
<div class="filter-preview"><span>饱和度 200%</span></div>
<pre class="code">filter: saturate(2);</pre>
</div>
<!-- sepia() -->
<div class="filter-card sepia">
<div class="card-header">
<h3 class="card-title">sepia()</h3>
<p class="card-subtitle">褐色复古效果 (0%-100%)</p>
</div>
<div class="filter-preview"><span>褐色效果 50%</span></div>
<pre class="code">filter: sepia(50%);</pre>
</div>
</div>
</div>
</body>
</html>
九、布局函数
| 函数 | 说明 | 示例 |
|---|---|---|
| fit-content() | 根据内容调整大小 | grid-template-columns: fit-content(200px); |
| minmax() | 定义大小范围 | grid-template-columns: minmax(100px, 1fr); |
| repeat() | 重复网格轨道 | grid-template-columns: repeat(3, 1fr); |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 网格布局函数展示</title>
<style>
:root {
--primary: #3498db;
--secondary: #2ecc71;
--accent: #e74c3c;
--dark: #2c3e50;
--light: #ecf0f1;
--gray: #95a5a6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
padding: 20px;
background-color: #f5f9fc;
color: var(--dark);
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 40px;
}
h1 {
font-size: 2.2rem;
margin-bottom: 10px;
color: var(--dark);
position: relative;
display: inline-block;
}
h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 2px;
}
.subtitle {
color: var(--gray);
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.grid-function-card {
background: white;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
padding: 25px;
transition: all 0.3s ease;
}
.grid-function-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.card-header {
margin-bottom: 20px;
}
.card-title {
font-size: 1.4rem;
color: var(--dark);
margin-bottom: 5px;
}
.card-subtitle {
font-size: 0.9rem;
color: var(--gray);
}
.demo-container {
width: 100%;
min-height: 200px;
margin: 20px 0;
border: 1px dashed var(--gray);
border-radius: 8px;
padding: 15px;
}
.demo-grid {
display: grid;
gap: 10px;
height: 100%;
}
.grid-item {
background-color: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
border-radius: 4px;
font-weight: bold;
}
.code {
background-color: var(--dark);
color: var(--light);
padding: 15px;
border-radius: 8px;
font-family: 'Courier New', Courier, monospace;
font-size: 0.9rem;
position: relative;
overflow-x: auto;
}
.code::before {
content: 'CSS';
position: absolute;
top: -10px;
right: 15px;
background-color: var(--accent);
color: white;
padding: 2px 10px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: bold;
}
/* 特定函数演示样式 */
.fit-content .demo-grid {
grid-template-columns: fit-content(200px) 1fr;
}
.minmax .demo-grid {
grid-template-columns: minmax(100px, 1fr) 1fr;
}
.repeat .demo-grid {
grid-template-columns: repeat(3, minmax(100px, 1fr));
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>CSS 网格布局函数</h1>
<p class="subtitle">探索CSS网格布局中各种尺寸函数的应用</p>
</header>
<div class="grid-container">
<!-- fit-content() 函数 -->
<div class="grid-function-card fit-content">
<div class="card-header">
<h3 class="card-title">fit-content()</h3>
<p class="card-subtitle">根据内容调整大小，不超过指定最大值</p>
</div>
<div class="demo-container">
<div class="demo-grid">
<div class="grid-item">fit-content(200px)</div>
<div class="grid-item">1fr</div>
</div>
</div>
<pre class="code">grid-template-columns: fit-content(200px) 1fr;</pre>
</div>
<!-- minmax() 函数 -->
<div class="grid-function-card minmax">
<div class="card-header">
<h3 class="card-title">minmax()</h3>
<p class="card-subtitle">定义大小范围，介于最小值和最大值之间</p>
</div>
<div class="demo-container">
<div class="demo-grid">
<div class="grid-item">minmax(100px, 1fr)</div>
<div class="grid-item">1fr</div>
</div>
</div>
<pre class="code">grid-template-columns: minmax(100px, 1fr) 1fr;</pre>
</div>
<!-- repeat() 函数 -->
<div class="grid-function-card repeat">
<div class="card-header">
<h3 class="card-title">repeat()</h3>
<p class="card-subtitle">重复网格轨道模式</p>
</div>
<div class="demo-container">
<div class="demo-grid">
<div class="grid-item">重复列1</div>
<div class="grid-item">重复列2</div>
<div class="grid-item">重复列3</div>
</div>
</div>
<pre class="code">grid-template-columns: repeat(3, minmax(100px, 1fr));</pre>
</div>
</div>
</div>
</body>
</html>
十、计数器函数
| 函数 | 说明 | 示例 |
|---|---|---|
| counter() | 获取计数器当前值 | content: counter(chapter) ". "; |
| counters() | 获取嵌套计数器的层级值 | content: counters(section, “.”) " "; |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 计数器函数展示</title>
<style>
:root {
--primary: #3498db;
--secondary: #2ecc71;
--accent: #e74c3c;
--dark: #2c3e50;
--light: #ecf0f1;
--gray: #95a5a6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
padding: 20px;
background-color: #f5f9fc;
color: var(--dark);
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 40px;
}
h1 {
font-size: 2.2rem;
margin-bottom: 10px;
color: var(--dark);
position: relative;
display: inline-block;
}
h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 2px;
}
.subtitle {
color: var(--gray);
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.counter-card {
background: white;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
padding: 25px;
transition: all 0.3s ease;
}
.counter-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.card-header {
margin-bottom: 20px;
}
.card-title {
font-size: 1.4rem;
color: var(--dark);
margin-bottom: 5px;
}
.card-subtitle {
font-size: 0.9rem;
color: var(--gray);
}
.demo-container {
width: 100%;
min-height: 200px;
margin: 20px 0;
border: 1px dashed var(--gray);
border-radius: 8px;
padding: 15px;
}
/* counter() 示例样式 */
.counter-example {
counter-reset: chapter;
}
.counter-example h3 {
counter-increment: chapter;
}
.counter-example h3::before {
content: "第" counter(chapter) "章: ";
color: var(--primary);
}
/* counters() 示例样式 */
.counters-example {
counter-reset: section;
}
.counters-example h4 {
counter-increment: section;
margin-left: 20px;
}
.counters-example h4::before {
content: counters(section, ".") " ";
color: var(--accent);
}
.code {
background-color: var(--dark);
color: var(--light);
padding: 15px;
border-radius: 8px;
font-family: 'Courier New', Courier, monospace;
font-size: 0.9rem;
position: relative;
overflow-x: auto;
}
.code::before {
content: 'CSS';
position: absolute;
top: -10px;
right: 15px;
background-color: var(--accent);
color: white;
padding: 2px 10px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: bold;
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>CSS 计数器函数</h1>
<p class="subtitle">探索CSS中counter()和counters()函数的应用</p>
</header>
<div class="grid-container">
<!-- counter() 函数 -->
<div class="counter-card">
<div class="card-header">
<h3 class="card-title">counter()</h3>
<p class="card-subtitle">获取计数器当前值</p>
</div>
<div class="demo-container counter-example">
<h3>HTML基础</h3>
<h3>CSS样式</h3>
<h3>JavaScript编程</h3>
</div>
<pre class="code">/* 初始化计数器 */
counter-reset: chapter;
/* 递增计数器 */
h3 {
counter-increment: chapter;
}
/* 使用计数器 */
h3::before {
content: "第" counter(chapter) "章: ";
}</pre>
</div>
<!-- counters() 函数 -->
<div class="counter-card">
<div class="card-header">
<h3 class="card-title">counters()</h3>
<p class="card-subtitle">获取嵌套计数器的层级值</p>
</div>
<div class="demo-container counters-example">
<h4>HTML基础</h4>
<h4>HTML元素</h4>
<h4>CSS样式</h4>
<h4>CSS选择器</h4>
<h4>CSS布局</h4>
</div>
<pre class="code">/* 初始化计数器 */
counter-reset: section;
/* 递增计数器 */
h4 {
counter-increment: section;
margin-left: 20px;
}
/* 使用嵌套计数器 */
h4::before {
content: counters(section, ".") " ";
}</pre>
</div>
</div>
</div>
</body>
</html>
十一、其他函数
| 函数 | 说明 | 示例 |
|---|---|---|
| attr() | 获取 HTML 属性值 | content: attr(data-label); (获取 data-label 属性的值) |
| var() | 使用 CSS 变量 | color: var(–primary-color); (引用自定义属性 --primary-color) |
| env() | 使用环境变量（如安全区域） | padding-bottom: env(safe-area-inset-bottom); (适配刘海屏) |
| conic-gradient() | 创建锥形渐变 | background: conic-gradient(red, yellow, green); (色轮渐变) |
| symbols() | 定义计数器样式（如列表符号） | @counter-style dots { symbols: “•”; } (自定义计数器符号) |
| format() | 指定字符串格式（如引号样式） | quotes: format(“«”, “»”); (设置自定义引号样式) |
| local() | 使用本地字体 | src: local(“Helvetica Neue”); (优先加载本地字体) |
| target-counter() | 获取目标元素的计数器值 | content: target-counter(url(#chapter) counter); (用于打印样式) |
| target-counters() | 获取目标元素的嵌套计数器值 | content: target-counters(url(#section) section, ". "); (多级编号) |
| target-text() | 获取目标元素的文本内容 | content: target-text(url(#title)); (引用其他元素的文本) |
| light-dark | 根据主题切换值（适配浅色/深色模式） | color: light-dark(black, white); （浅色模式黑色，深色模式白色） |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 多样化函数展示</title>
<style>
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--accent-color: #e74c3c;
--dark-color: #2c3e50;
--light-color: #ecf0f1;
--gray-color: #95a5a6;
--custom-quote: "'" "'" "'" "'";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
padding: 20px;
background-color: #f5f9fc;
color: var(--dark-color);
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 40px;
}
h1 {
font-size: 2.2rem;
margin-bottom: 10px;
color: var(--dark-color);
position: relative;
display: inline-block;
}
h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 2px;
}
.subtitle {
color: var(--gray-color);
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-bottom: 50px;
}
.function-card {
background: white;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
padding: 25px;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.function-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.card-header {
margin-bottom: 15px;
}
.card-title {
font-size: 1.3rem;
color: var(--dark-color);
margin-bottom: 5px;
}
.card-subtitle {
font-size: 0.85rem;
color: var(--gray-color);
}
.demo-container {
width: 100%;
min-height: 150px;
margin: 15px 0;
padding: 15px;
border-radius: 8px;
background-color: #f8fafc;
display: flex;
flex-direction: column;
justify-content: center;
}
.code {
background-color: var(--dark-color);
color: var(--light-color);
padding: 12px;
border-radius: 6px;
font-family: 'Courier New', Courier, monospace;
font-size: 0.85rem;
margin-top: auto;
position: relative;
overflow-x: auto;
}
.code::before {
content: 'CSS';
position: absolute;
top: -10px;
right: 15px;
background-color: var(--accent-color);
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.7rem;
font-weight: bold;
}
/* attr() 函数示例 */
.attr-example {
border: 1px solid var(--primary-color);
}
.attr-example::before {
content: attr(data-label);
display: block;
padding: 5px;
background-color: var(--primary-color);
color: white;
font-weight: bold;
}
/* var() 函数示例 */
.var-example {
background-color: var(--primary-color);
color: white;
padding: 10px;
text-align: center;
font-weight: bold;
}
/* env() 函数示例 */
.env-example {
border: 2px dashed var(--accent-color);
padding: 10px;
position: relative;
}
.env-example::after {
content: "安全区域示例";
color: var(--accent-color);
font-size: 0.8rem;
}
/* conic-gradient() 函数示例 */
.conic-example {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 50%;
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
/* symbols() 函数示例 */
@counter-style dots {
system: cyclic;
symbols: "•";
suffix: " ";
}
.symbols-example {
list-style: dots;
padding-left: 25px;
}
/* format() 函数示例 */
.format-example q {
quotes: "'" "'" "'" "'";
}
/* local() 函数示例 */
.local-example {
font-family: "Helvetica Neue", local("Arial"), sans-serif;
font-weight: bold;
}
/* target-counter() 函数示例 - 主要用于打印样式 */
.target-counter-example a::after {
content: " (见章节 " target-counter(attr(href), chapter) ")";
color: var(--gray-color);
font-size: 0.8em;
}
/* target-counters() 函数示例 - 主要用于打印样式 */
.target-counters-example a::after {
content: " (见章节 " target-counters(attr(href), section, ".") ")";
color: var(--gray-color);
font-size: 0.8em;
}
/* target-text() 函数示例 - 主要用于打印样式 */
.target-text-example a::after {
content: " (" target-text(attr(href)) ")";
color: var(--gray-color);
font-size: 0.8em;
}
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>CSS 多样化函数</h1>
<p class="subtitle">探索CSS中各种实用函数的应用场景</p>
</header>
<div class="grid">
<!-- attr() 函数 -->
<div class="function-card">
<div class="card-header">
<h3 class="card-title">attr()</h3>
<p class="card-subtitle">获取HTML元素属性值</p>
</div>
<div class="demo-container attr-example" data-label="这是data-label属性的值">
内容区域
</div>
<pre class="code">content: attr(data-label);</pre>
</div>
<!-- var() 函数 -->
<div class="function-card">
<div class="card-header">
<h3 class="card-title">var()</h3>
<p class="card-subtitle">使用CSS自定义变量</p>
</div>
<div class="demo-container">
<div class="var-example">使用 --primary-color 变量</div>
</div>
<pre class="code">background-color: var(--primary-color);</pre>
</div>
<!-- env() 函数 -->
<div class="function-card">
<div class="card-header">
<h3 class="card-title">env()</h3>
<p class="card-subtitle">使用环境变量(如安全区域)</p>
</div>
<div class="demo-container env-example">
模拟安全区域效果
</div>
<pre class="code">padding-bottom: env(safe-area-inset-bottom);</pre>
</div>
<!-- conic-gradient() 函数 -->
<div class="function-card">
<div class="card-header">
<h3 class="card-title">conic-gradient()</h3>
<p class="card-subtitle">创建锥形渐变</p>
</div>
<div class="demo-container">
<div class="conic-example"></div>
</div>
<pre class="code">background: conic-gradient(
red, yellow, lime,
aqua, blue, magenta, red
);</pre>
</div>
<!-- symbols() 函数 -->
<div class="function-card">
<div class="card-header">
<h3 class="card-title">symbols()</h3>
<p class="card-subtitle">自定义计数器样式</p>
</div>
<div class="demo-container">
<ul class="symbols-example">
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>
</div>
<pre class="code">@counter-style dots {
system: cyclic;
symbols: "•";
suffix: " ";
}</pre>
</div>
<!-- format() 函数 -->
<div class="function-card">
<div class="card-header">
<h3 class="card-title">format()</h3>
<p class="card-subtitle">自定义引号样式</p>
</div>
<div class="demo-container format-example">
<q>这是一段引用文本</q>
</div>
<pre class="code">quotes: "'" "'" "'" "'";</pre>
</div>
<!-- local() 函数 -->
<div class="function-card">
<div class="card-header">
<h3 class="card-title">local()</h3>
<p class="card-subtitle">使用本地字体</p>
</div>
<div class="demo-container local-example">
优先使用本地Helvetica Neue字体
</div>
<pre class="code">font-family: local("Helvetica Neue"),
local("Arial"), sans-serif;</pre>
</div>
<!-- target-counter() 函数 -->
<div class="function-card">
<div class="card-header">
<h3 class="card-title">target-counter()</h3>
<p class="card-subtitle">获取目标元素的计数器值</p>
</div>
<div class="demo-container target-counter-example">
<a href="#chapter1">第一章链接</a>
</div>
<pre class="code">content: " (见章节 "
target-counter(attr(href), chapter) ")";</pre>
</div>
</div>
</div>
</body>
</html>
十二、CSS环境变量
| 变量名称 | 说明 | 示例 |
|---|---|---|
| safe-area-inset-top | 设备顶部安全区域（如刘海屏）的距离 | padding-top: env(safe-area-inset-top); |
| safe-area-inset-right | 设备右侧安全区域的距离 | padding-right: env(safe-area-inset-right); |
| safe-area-inset-bottom | 设备底部安全区域（如虚拟导航栏）的距离 | padding-bottom: env(safe-area-inset-bottom); |
| safe-area-inset-left | 设备左侧安全区域的距离 | padding-left: env(safe-area-inset-left); |
| titlebar-area-x | PWA 中标题栏的左上角 X 坐标（实验性） | left: env(titlebar-area-x); |
| titlebar-area-y | PWA 中标题栏的左上角 Y 坐标（实验性） | top: env(titlebar-area-y); |
| titlebar-area-width | PWA 中标题栏的可用宽度（实验性） | width: env(titlebar-area-width); |
| titlebar-area-height | PWA 中标题栏的可用高度（实验性） | height: env(titlebar-area-height); |
| keyboard-inset-top | 虚拟键盘顶部距离（移动端输入时，实验性） | margin-top: env(keyboard-inset-top) |
| keyboard-inset-height | 虚拟键盘高度 （实验性） | min-height: env(keyboard-inset-height) |
| toolbar-inset-height | 浏览器工具栏高度（如移动端 Chrome 地址栏，实验性） | padding-bottom: env(toolbar-inset-height) |