CSS系列（8）-- 颜色与渐变详解

最新推荐文章于 2025-03-22 01:30:05 发布

BitCat

最新推荐文章于 2025-03-22 01:30:05 发布

阅读量1.4k

点赞数 7

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/Chen7Chan/article/details/144397929

版权

CSS 专栏收录该内容

60 篇文章

订阅专栏

前端技术探索系列：CSS 颜色与渐变详解 🌈

致读者：探索网页设计的色彩艺术 👋

前端开发者们，

今天我们将深入探讨 CSS 颜色与渐变，学习如何创建丰富多彩的视觉体验。

颜色表示方法 🎨

基础颜色语法

.color-syntax {
    /* 关键字颜色 */
    color: red;
    
    /* 十六进制 */
    color: #ff0000;
    color: #f00; /* 简写 */
    
    /* RGB */
    color: rgb(255, 0, 0);
    color: rgba(255, 0, 0, 0.5);
    
    /* HSL */
    color: hsl(0, 100%, 50%);
    color: hsla(0, 100%, 50%, 0.5);
    
    /* 现代颜色语法 */
    color: rgb(255 0 0 / 50%);
    color: hsl(0 100% 50% / 50%);
}

/* 当前颜色 */
.current-color {
    border: 1px solid currentColor;
}

现代颜色特性

/* 颜色函数 */
.modern-colors {
    /* 混合 */
    color: color-mix(in srgb, #34c9eb 50%, #e833b0);
    
    /* 相对颜色 */
    color: color-contrast(wheat vs tan, sienna, #d2691e);
    
    /* 颜色空间转换 */
    color: color(display-p3 0.6 0.2 0.8);
}

/* CSS 颜色级别 4 */
.color-level4 {
    /* HWB */
    color: hwb(0 0% 0%);
    
    /* LAB */
    color: lab(50% 50 50);
    
    /* LCH */
    color: lch(50% 50 50);
}

渐变效果详解 🎯

线性渐变

/* 基础线性渐变 */
.linear-gradients {
    /* 双色渐变 */
    background: linear-gradient(to right, #00f, #f00);
    
    /* 多色渐变 */
    background: linear-gradient(
        45deg,
        #ff6b6b,
        #4ecdc4,
        #45b7d1
    );
    
    /* 彩虹渐变 */
    background: linear-gradient(
        to right,
        red,
        orange,
        yellow,
        green,
        blue,
        indigo,
        violet
    );
}

/* 高级渐变效果 */
.advanced-gradients {
    /* 条纹效果 */
    background: repeating-linear-gradient(
        45deg,
        #606dbc,
        #606dbc 10px,
        #465298 10px,
        #465298 20px
    );
    
    /* 渐变文字 */
    background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);
    -webkit-background-clip: text;
    color: transparent;
}

径向渐变

/* 基础径向渐变 */
.radial-gradients {
    /* 圆形渐变 */
    background: radial-gradient(
        circle at center,
        #fff 0%,
        rgba(255,255,255,0) 70%
    );
    
    /* 椭圆渐变 */
    background: radial-gradient(
        ellipse at top left,
        #ff6b6b,
        transparent
    );
}

/* 创意径向渐变 */
.creative-radial {
    /* 聚光灯效果 */
    background: radial-gradient(
        circle at var(--x, 50%) var(--y, 50%),
        rgba(255,255,255,0.2) 0%,
        rgba(0,0,0,0.8) 50%
    );
}

圆锥渐变

/* 基础圆锥渐变 */
.conic-gradients {
    /* 基本圆锥 */
    background: conic-gradient(
        from 0deg,
        red,
        yellow,
        green,
        blue,
        red
    );
    
    /* 饼图效果 */
    background: conic-gradient(
        #ff6b6b 0deg 90deg,
        #4ecdc4 90deg 180deg,
        #45b7d1 180deg 270deg,
        #96ceb4 270deg
    );
}

实践项目：主题系统 🛠️

class ThemeSystem {
    constructor(options = {}) {
        this.options = {
            themes: {
                light: {
                    primary: '#007bff',
                    secondary: '#6c757d',
                    background: '#ffffff',
                    text: '#212529'
                },
                dark: {
                    primary: '#0056b3',
                    secondary: '#545b62',
                    background: '#121212',
                    text: '#f8f9fa'
                }
            },
            defaultTheme: 'light',
            ...options
        };
        
        this.init();
    }

    init() {
        this.createStyles();
        this.setupThemeToggle();
        this.applyTheme(this.options.defaultTheme);
    }

    createStyles() {
        const style = document.createElement('style');
        style.textContent = this.generateStyles();
        document.head.appendChild(style);
    }

    generateStyles() {
        let styles = '';
        
        // 生成主题变量
        Object.entries(this.options.themes).forEach(([theme, colors]) => {
            styles += `
                [data-theme="${theme}"] {
                    --primary: ${colors.primary};
                    --secondary: ${colors.secondary};
                    --background: ${colors.background};
                    --text: ${colors.text};
                    
                    /* 生成衍生颜色 */
                    --primary-light: ${this.lighten(colors.primary, 10)};
                    --primary-dark: ${this.darken(colors.primary, 10)};
                    --primary-alpha: ${this.addAlpha(colors.primary, 0.1)};
                }
            `;
        });

        // 生成通用样式
        styles += `
            body {
                background-color: var(--background);
                color: var(--text);
                transition: background-color 0.3s, color 0.3s;
            }

            .btn-primary {
                background-color: var(--primary);
                border-color: var(--primary);
                color: white;
            }

            .btn-primary:hover {
                background-color: var(--primary-dark);
                border-color: var(--primary-dark);
            }
        `;

        return styles;
    }

    lighten(color, amount) {
        return this.adjustColor(color, amount, 'lighten');
    }

    darken(color, amount) {
        return this.adjustColor(color, amount, 'darken');
    }

    addAlpha(color, alpha) {
        const rgb = this.hexToRgb(color);
        return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
    }

    hexToRgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }

    applyTheme(theme) {
        document.documentElement.setAttribute('data-theme', theme);
        localStorage.setItem('theme', theme);
    }

    setupThemeToggle() {
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme) {
            this.applyTheme(savedTheme);
        }

        // 监听系统主题变化
        if (window.matchMedia) {
            window.matchMedia('(prefers-color-scheme: dark)')
                .addListener(e => {
                    this.applyTheme(e.matches ? 'dark' : 'light');
                });
        }
    }
}