CSS函数完全指南:掌握样式与动态效果

发布于:2025-07-10 ⋅ 阅读:(24) ⋅ 点赞:(0)

一、简介

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-&gt;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%-&gt;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%-&gt;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)

网站公告

今日签到

点亮在社区的每一天
去签到