CSS Box-Shadow可视化生成器：实时调节阴影参数、多层叠加、5种快速预设、一键复制CSS代码

🖥️ 运行效果

🚀 实例简介

一款专业的CSS box-shadow属性可视化生成工具，支持实时调节阴影参数（X/Y偏移、模糊半径、扩展半径、不透明度）、多层阴影叠加、5种快速预设效果（柔和阴影、锐利阴影、发光效果、浮雕效果、深度阴影）、颜色选择器，一键生成标准CSS代码并复制到剪贴板。适用于Web前端开发、UI设计、CSS学习等场景。

💻 核心代码

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
CSS Box-Shadow 可视化生成器
功能：实时调节阴影参数、预览效果、支持多层阴影、一键复制CSS代码
作者：51Python.com
"""
import tkinter as tk
from tkinter import ttk, colorchooser, messagebox
import platform
import re

# 中文字体配置（无头服务器必须指定）
CHINESE_FONT = "WenQuanYi Zen Hei" if platform.system() == "Linux" else "Microsoft YaHei"


class CSSBoxShadowGenerator:
    """CSS Box-Shadow 可视化生成器主窗口"""

    def __init__(self, root):
        self.root = root
        self.root.title("CSS Box-Shadow 可视化生成器 - 51Python.com")
        self.root.geometry("900x680")
        self.root.configure(bg="#f0f0f0")

        # 多层阴影数据
        self.layers = []
        self.layer_label = None  # 初始化，避免 add_layer 时未创建

        self._build_ui()
        self.add_layer()  # 默认添加第一层（在 UI 构建后）
        self._update_preview()

    def _build_ui(self):
        """构建界面布局"""
        # ===== 顶部标题 =====
        title_frame = tk.Frame(self.root, bg="#2c3e50", height=50)
        title_frame.pack(fill=tk.X)
        title_frame.pack_propagate(False)
        tk.Label(
            title_frame, text="🎨 CSS Box-Shadow 可视化生成器",
            font=(CHINESE_FONT, 16, "bold"), bg="#2c3e50", fg="white"
        ).pack(side=tk.LEFT, padx=20, pady=10)

        # ===== 主体区域（左右分栏） =====
        main_frame = tk.Frame(self.root, bg="#f0f0f0")
        main_frame.pack(fill=tk.BOTH, expand=True, padx=10, pady=5)

        # --- 左侧：参数控制面板 ---
        left_frame = tk.LabelFrame(
            main_frame, text=" 参数调节 ", font=(CHINESE_FONT, 11, "bold"),
            bg="#ffffff", padx=10, pady=10
        )
        left_frame.pack(side=tk.LEFT, fill=tk.BOTH, expand=True, padx=(0, 5))

        # 阴影参数滑块
        self.params = {}
        slider_config = [
            ("x_offset", "X轴偏移 (px)", -50, 50, 5),
            ("y_offset", "Y轴偏移 (px)", -50, 50, 10),
            ("blur", "模糊半径 (px)", 0, 100, 20),
            ("spread", "扩展半径 (px)", -30, 50, 0),
            ("opacity", "不透明度 (%)", 0, 100, 40),
        ]

        for key, label, from_, to_, default in slider_config:
            frame = tk.Frame(left_frame, bg="#ffffff")
            frame.pack(fill=tk.X, pady=3)
            tk.Label(
                frame, text=label, font=(CHINESE_FONT, 9),
                bg="#ffffff", width=16, anchor="w"
            ).pack(side=tk.LEFT)

            var = tk.IntVar(value=default)
            self.params[key] = var

            scale = tk.Scale(
                frame, from_=from_, to=to_, orient=tk.HORIZONTAL,
                variable=var, length=200, command=lambda v: self._update_preview()
            )

💡 适用场景

办公自动化、数据分析、快速原型开发