master

分支 (1)

管理

管理

master

Wetemp
/
border-customizer.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字边框</title>

    <style>
        @font-face {
            font-family: 'MyFont';
            src: url('font/MyFont-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'MyFont-pen';
            src: url('font/MyFont-pen.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'fangyuan';
            src: url('font/fangyuan14.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        :root {
            --primary: #3B82F6;
            --primary-light: #EFF6FF;
            --primary-dark: #2563EB;
            --secondary: #10B981;
            --neutral: #F3F4F6;
            --neutral-dark: #E5E7EB;
            --text: #1F2937;
            --text-light: #6B7280;
            --white: #FFFFFF;
            --border: #E5E7EB;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
        }

        body {
            background-color: #F9FAFB;
            color: var(--text);
            padding: 15px;
            line-height: 1.5;
            overflow: hidden;
        }

        .container {
            margin: 0 auto;
            position: relative;
            height: calc(100vh - 30px);
        }

        main {
            display: flex;
            flex-direction: column;
            gap: 15px;
            height: 100%;
        }

        @media (min-width: 768px) {
            main {
                flex-direction: row;
            }
        }

        /* 面板样式 */
        .panel {
            background: var(--white);
            border-radius: 12px;
            padding: 20px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            transition: all 0.3s ease;
        }

        .panel:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        /* 左侧控制面板 */
        .control-panel {
            flex: 1;
            min-width: 300px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin;
            scrollbar-color: var(--primary-light) var(--neutral);
        }

        .control-panel::-webkit-scrollbar {
            width: 6px;
        }

        .control-panel::-webkit-scrollbar-track {
            background: var(--neutral);
            border-radius: 3px;
        }

        .control-panel::-webkit-scrollbar-thumb {
            background: var(--primary-light);
            border-radius: 3px;
        }

        .control-panel::-webkit-scrollbar-thumb:hover {
            background: var(--primary);
        }

        /* 右侧预览面板 */
        .preview-panel {
            flex: 1;
            min-width: 300px;
            position: sticky;
            top: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        /* 标题样式 */
        h2 {
            font-size: 18px;
            margin-bottom: 15px;
            color: var(--text);
            font-weight: 600;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
            position: relative;
        }

        h2::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 40px;
            height: 2px;
            background-color: var(--primary);
        }

        /* 控件样式 */
        .control-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: var(--text-light);
            font-weight: 500;
        }

        input[type="text"],
        input[type="number"],
        textarea,
        select {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid #D1D5DB;
            border-radius: 6px;
            font-size: 14px;
            background-color: var(--white);
            transition: all 0.2s ease;
        }

        input[type="text"]:focus,
        input[type="number"]:focus,
        textarea:focus,
        select:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        textarea {
            min-height: 80px;
            resize: vertical;
        }

        input[type="range"] {
            width: 100%;
            height: 4px;
            background: var(--neutral-dark);
            border-radius: 2px;
            outline: none;
            -webkit-appearance: none;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            background: var(--primary-dark);
        }

        .range-value {
            display: inline-block;
            min-width: 30px;
            color: var(--primary);
            font-weight: 500;
        }

        .color-input {
            display: flex;
            gap: 10px;
        }

        input[type="color"] {
            width: 44px;
            height: 44px;
            padding: 0;
            border: 1px solid #D1D5DB;
            border-radius: 6px;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        input[type="color"]:hover {
            transform: scale(1.05);
        }

        .button-group {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }

        button {
            padding: 9px 14px;
            border: 1px solid #D1D5DB;
            border-radius: 6px;
            background: var(--white);
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        button:hover {
            background: var(--neutral);
            transform: translateY(-1px);
        }

        button.active {
            background: var(--primary-light);
            border-color: var(--primary);
            color: var(--primary);
        }

        /* 边框类型选择器 */
        .border-types {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 15px;
        }

        .border-type-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 15px;
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            background-color: var(--white);
        }

        .border-type-btn:hover {
            border-color: #9CA3AF;
            background-color: var(--neutral);
            transform: translateY(-2px);
        }

        .border-type-btn.active {
            border-color: var(--primary);
            background-color: var(--primary-light);
        }

        .border-type-btn .icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 18px;
        }

        .border-type-btn .label {
            font-size: 14px;
            flex: 1;
        }

        /* 预览区域 */
        .preview-container {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            border-radius: 8px;
            padding: 20px;
            margin-top: 10px;
        }

        #previewWrapper {
            transition: all 0.3s ease;
        }

        #previewText {
            transition: all 0.3s ease;
            text-align: center;
        }

        /* 隐藏面板 */
        .border-panel {
            display: none;
        }

        .border-panel.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <main>
            <!-- 左侧控制面板 -->
            <section class="control-panel">
                <!-- 文本输入面板 -->
                <div class="panel">
                    <h2>文本设置</h2>
                    <div class="control-group">
                        <label for="textInput">输入文本</label>
                        <textarea id="textInput" rows="3" placeholder="请输入要添加边框的文字...">文字效果</textarea>
                    </div>

                    <div class="control-group">
                        <label for="fontFamily">字体</label>
                        <select id="fontFamily">
                            <option value="'MyFont', sans-serif" selected>手写体</option>
                            <option value="MyFont-pen, sans-serif">钢笔字体</option>
                            <option value="'fangyuan', sans-serif">草体</option>
                            <option value="'SimSun', serif">宋体</option>
                            <option value="'SimHei', sans-serif">黑体</option>
                        </select>
                    </div>

                    <div class="control-group">
                        <label for="fontSize">字号: <span id="fontSizeValue" class="range-value">24</span>px</label>
                        <input type="range" id="fontSize" min="12" max="72" value="24">
                    </div>

                    <div class="control-group">
                        <label>文字样式</label>
                        <div class="button-group">
                            <button id="boldBtn">加粗</button>
                            <button id="italicBtn">斜体</button>
                            <button id="underlineBtn">下划线</button>
                        </div>
                    </div>

                    <div class="control-group">
                        <label>文字颜色</label>
                        <div class="color-input">
                            <input type="color" id="textColor" value="#1F2937">
                            <input type="text" id="textColorHex" value="#1F2937">
                        </div>
                    </div>
                </div>

                <!-- 边框类型选择 -->
                <div class="panel">
                    <h2>边框样式</h2>
                    <div class="border-types">
                        <div class="border-type-btn active" data-type="basic">
                            <div class="icon">□</div>
                            <div class="label">基础边框</div>
                        </div>
                        <div class="border-type-btn" data-type="solid">
                            <div class="icon">■</div>
                            <div class="label">实心边框</div>
                        </div>
                        <div class="border-type-btn" data-type="dashed">
                            <div class="icon">▢</div>
                            <div class="label">虚线边框</div>
                        </div>
                        <div class="border-type-btn" data-type="gradient">
                            <div class="icon">⟲</div>
                            <div class="label">渐变边框</div>
                        </div>
                        <div class="border-type-btn" data-type="round">
                            <div class="icon">○</div>
                            <div class="label">圆角边框</div>
                        </div>
                        <div class="border-type-btn" data-type="shadow">
                            <div class="icon">◎</div>
                            <div class="label">阴影边框</div>
                        </div>
                    </div>
                </div>

                <!-- 基础边框设置面板 -->
                <div id="basicBorderPanel" class="border-panel active">
                    <div class="panel">
                        <h2>基础边框设置</h2>
                        <div class="control-group">
                            <label for="borderStyle">边框线型</label>
                            <select id="borderStyle">
                                <option value="none">无</option>
                                <option value="solid" selected>实线</option>
                                <option value="dashed">虚线</option>
                                <option value="dotted">点线</option>
                                <option value="double">双线</option>
                            </select>
                        </div>

                        <div class="control-group">
                            <label for="borderWidth">边框宽度: <span id="borderWidthValue" class="range-value">2</span>px</label>
                            <input type="range" id="borderWidth" min="0" max="20" value="2">
                        </div>

                        <div class="control-group">
                            <label>边框颜色</label>
                            <div class="color-input">
                                <input type="color" id="borderColor" value="#3B82F6">
                                <input type="text" id="borderColorHex" value="#3B82F6">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 其他边框设置面板 (保留核心功能) -->
                <div id="solidBorderPanel" class="border-panel">
                    <div class="panel">
                        <h2>实心边框设置</h2>
                        <div class="control-group">
                            <label for="solidBorderWidth">边框宽度: <span id="solidBorderWidthValue" class="range-value">3</span>px</label>
                            <input type="range" id="solidBorderWidth" min="0" max="30" value="3">
                        </div>

                        <div class="control-group">
                            <label>边框颜色</label>
                            <div class="color-input">
                                <input type="color" id="solidBorderColor" value="#3B82F6">
                                <input type="text" id="solidBorderColorHex" value="#3B82F6">
                            </div>
                        </div>
                    </div>
                </div>

                <div id="dashedBorderPanel" class="border-panel">
                    <div class="panel">
                        <h2>虚线边框设置</h2>
                        <div class="control-group">
                            <label for="dashedBorderWidth">线条宽度: <span id="dashedBorderWidthValue" class="range-value">2</span>px</label>
                            <input type="range" id="dashedBorderWidth" min="1" max="10" value="2">
                        </div>

                        <div class="control-group">
                            <label for="dashedBorderDash">线段长度: <span id="dashedBorderDashValue" class="range-value">6</span>px</label>
                            <input type="range" id="dashedBorderDash" min="2" max="30" value="6">
                        </div>

                        <div class="control-group">
                            <label>边框颜色</label>
                            <div class="color-input">
                                <input type="color" id="dashedBorderColor" value="#3B82F6">
                                <input type="text" id="dashedBorderColorHex" value="#3B82F6">
                            </div>
                        </div>
                    </div>
                </div>

                <div id="gradientBorderPanel" class="border-panel">
                    <div class="panel">
                        <h2>渐变边框设置</h2>
                        <div class="control-group">
                            <label for="gradientBorderWidth">边框宽度: <span id="gradientBorderWidthValue" class="range-value">3</span>px</label>
                            <input type="range" id="gradientBorderWidth" min="0" max="20" value="3">
                        </div>

                        <div class="control-group">
                            <label>起始颜色</label>
                            <div class="color-input">
                                <input type="color" id="gradientColor1" value="#3B82F6">
                                <input type="text" id="gradientColor1Hex" value="#3B82F6">
                            </div>
                        </div>

                        <div class="control-group">
                            <label>结束颜色</label>
                            <div class="color-input">
                                <input type="color" id="gradientColor2" value="#10B981">
                                <input type="text" id="gradientColor2Hex" value="#10B981">
                            </div>
                        </div>
                    </div>
                </div>

                <div id="roundBorderPanel" class="border-panel">
                    <div class="panel">
                        <h2>圆角边框设置</h2>
                        <div class="control-group">
                            <label for="roundBorderRadius">圆角大小: <span id="roundBorderRadiusValue" class="range-value">15</span>px</label>
                            <input type="range" id="roundBorderRadius" min="0" max="50" value="15">
                        </div>

                        <div class="control-group">
                            <label>边框颜色</label>
                            <div class="color-input">
                                <input type="color" id="roundBorderColor" value="#3B82F6">
                                <input type="text" id="roundBorderColorHex" value="#3B82F6">
                            </div>
                        </div>
                    </div>
                </div>

                <div id="shadowBorderPanel" class="border-panel">
                    <div class="panel">
                        <h2>阴影边框设置</h2>
                        <div class="control-group">
                            <label for="shadowSpread">阴影范围: <span id="shadowSpreadValue" class="range-value">5</span>px</label>
                            <input type="range" id="shadowSpread" min="0" max="30" value="5">
                        </div>

                        <div class="control-group">
                            <label for="shadowBlur">模糊程度: <span id="shadowBlurValue" class="range-value">10</span>px</label>
                            <input type="range" id="shadowBlur" min="0" max="50" value="10">
                        </div>

                        <div class="control-group">
                            <label>阴影颜色</label>
                            <div class="color-input">
                                <input type="color" id="shadowColor" value="#3B82F6">
                                <input type="text" id="shadowColorHex" value="#3B82F6">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 通用设置面板 -->
                <div class="panel">
                    <h2>通用设置</h2>
                    <div class="control-group">
                        <label for="padding">内边距: <span id="paddingValue" class="range-value">12</span>px</label>
                        <input type="range" id="padding" min="0" max="50" value="12">
                    </div>

                    <div class="control-group">
                        <label>背景颜色</label>
                        <div class="color-input">
                            <input type="color" id="bgColor" value="#FFFFFF">
                            <input type="text" id="bgColorHex" value="#FFFFFF">
                        </div>
                    </div>
                </div>
            </section>

            <!-- 右侧预览区 -->
            <section class="preview-panel">
                <div class="panel">
                    <h2>实时预览</h2>
                    <div class="preview-container">
                        <div id="previewWrapper">
                            <div id="previewText">文字效果</div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <script>
        // 获取DOM元素
        const textInput = document.getElementById('textInput');
        const fontFamily = document.getElementById('fontFamily');
        const fontSize = document.getElementById('fontSize');
        const fontSizeValue = document.getElementById('fontSizeValue');
        const boldBtn = document.getElementById('boldBtn');
        const italicBtn = document.getElementById('italicBtn');
        const underlineBtn = document.getElementById('underlineBtn');
        const textColor = document.getElementById('textColor');
        const textColorHex = document.getElementById('textColorHex');

        // 边框类型按钮
        const borderTypeBtns = document.querySelectorAll('.border-type-btn');
        const borderPanels = document.querySelectorAll('.border-panel');

        // 基础边框设置
        const borderStyle = document.getElementById('borderStyle');
        const borderWidth = document.getElementById('borderWidth');
        const borderWidthValue = document.getElementById('borderWidthValue');
        const borderColor = document.getElementById('borderColor');
        const borderColorHex = document.getElementById('borderColorHex');

        // 实心边框设置
        const solidBorderWidth = document.getElementById('solidBorderWidth');
        const solidBorderWidthValue = document.getElementById('solidBorderWidthValue');
        const solidBorderColor = document.getElementById('solidBorderColor');
        const solidBorderColorHex = document.getElementById('solidBorderColorHex');

        // 虚线边框设置
        const dashedBorderWidth = document.getElementById('dashedBorderWidth');
        const dashedBorderWidthValue = document.getElementById('dashedBorderWidthValue');
        const dashedBorderDash = document.getElementById('dashedBorderDash');
        const dashedBorderDashValue = document.getElementById('dashedBorderDashValue');
        const dashedBorderColor = document.getElementById('dashedBorderColor');
        const dashedBorderColorHex = document.getElementById('dashedBorderColorHex');

        // 渐变边框设置
        const gradientBorderWidth = document.getElementById('gradientBorderWidth');
        const gradientBorderWidthValue = document.getElementById('gradientBorderWidthValue');
        const gradientColor1 = document.getElementById('gradientColor1');
        const gradientColor1Hex = document.getElementById('gradientColor1Hex');
        const gradientColor2 = document.getElementById('gradientColor2');
        const gradientColor2Hex = document.getElementById('gradientColor2Hex');

        // 圆角边框设置
        const roundBorderRadius = document.getElementById('roundBorderRadius');
        const roundBorderRadiusValue = document.getElementById('roundBorderRadiusValue');
        const roundBorderColor = document.getElementById('roundBorderColor');
        const roundBorderColorHex = document.getElementById('roundBorderColorHex');

        // 阴影边框设置
        const shadowSpread = document.getElementById('shadowSpread');
        const shadowSpreadValue = document.getElementById('shadowSpreadValue');
        const shadowBlur = document.getElementById('shadowBlur');
        const shadowBlurValue = document.getElementById('shadowBlurValue');
        const shadowColor = document.getElementById('shadowColor');
        const shadowColorHex = document.getElementById('shadowColorHex');

        // 通用设置
        const padding = document.getElementById('padding');
        const paddingValue = document.getElementById('paddingValue');
        const bgColor = document.getElementById('bgColor');
        const bgColorHex = document.getElementById('bgColorHex');

        // 预览区域
        const previewText = document.getElementById('previewText');
        const previewWrapper = document.getElementById('previewWrapper');

        // 状态变量
        let textStyles = {
            bold: false,
            italic: false,
            underline: false
        };

        let currentBorderType = 'basic';

        // 更新预览
        function updatePreview() {
            // 获取所有值
            const text = textInput.value || '请输入文字';
            const font = fontFamily.value;
            const size = fontSize.value;
            const color = textColor.value;
            const pad = padding.value;
            const bg = bgColor.value;

            // 重置所有边框相关样式
            previewText.style.border = 'none';
            previewText.style.boxShadow = 'none';
            previewText.style.backgroundClip = 'border-box';
            previewText.style.borderImage = 'none';
            previewText.style.borderRadius = '0';
            previewWrapper.style.padding = '0';
            previewWrapper.style.border = 'none';
            previewWrapper.style.background = 'none';
            previewWrapper.style.boxShadow = 'none';
            previewWrapper.style.borderRadius = '0';

            // 应用文字样式
            previewText.textContent = text;
            previewText.style.fontFamily = font;
            previewText.style.fontSize = `${size}px`;
            previewText.style.color = color;
            previewText.style.fontWeight = textStyles.bold ? 'bold' : 'normal';
            previewText.style.fontStyle = textStyles.italic ? 'italic' : 'normal';
            previewText.style.textDecoration = textStyles.underline ? 'underline' : 'none';
            previewText.style.padding = `${pad}px`;
            previewText.style.backgroundColor = bg;
            previewText.style.display = 'inline-block';

            // 根据边框类型应用不同样式
            switch(currentBorderType) {
                case 'basic':
                    const bStyle = borderStyle.value;
                    const bWidth = borderWidth.value;
                    const bColor = borderColor.value;

                    previewText.style.border = `${bWidth}px ${bStyle} ${bColor}`;
                    break;

                case 'solid':
                    const sWidth = solidBorderWidth.value;
                    const sColor = solidBorderColor.value;

                    previewText.style.border = `${sWidth}px solid ${sColor}`;
                    break;

                case 'dashed':
                    const dWidth = dashedBorderWidth.value;
                    const dDash = dashedBorderDash.value;
                    const dColor = dashedBorderColor.value;

                    previewText.style.border = `${dWidth}px dashed ${dColor}`;
                    previewText.style.borderRadius = '2px';
                    previewText.style.borderImage = `linear-gradient(to right, ${dColor} ${dDash}px, transparent 2px) 1 repeat`;
                    break;

                case 'gradient':
                    const gWidth = gradientBorderWidth.value;
                    const gColor1 = gradientColor1.value;
                    const gColor2 = gradientColor2.value;

                    // 渐变边框特殊处理
                    previewText.style.border = `${gWidth}px solid transparent`;
                    previewText.style.backgroundClip = 'padding-box, border-box';
                    previewText.style.backgroundOrigin = 'padding-box, border-box';
                    previewText.style.backgroundImage = `linear-gradient(to right, ${bg}, ${bg}), linear-gradient(45deg, ${gColor1}, ${gColor2})`;
                    break;

                case 'round':
                    const rRadius = roundBorderRadius.value;
                    const rColor = roundBorderColor.value;

                    previewText.style.borderRadius = `${rRadius}px`;
                    previewText.style.border = `2px solid ${rColor}`;
                    break;

                case 'shadow':
                    const sSpread = shadowSpread.value;
                    const sBlur = shadowBlur.value;
                    const shColor = shadowColor.value;

                    // 从颜色值提取RGB
                    const shr = parseInt(shColor.slice(1, 3), 16);
                    const shg = parseInt(shColor.slice(3, 5), 16);
                    const shb = parseInt(shColor.slice(5, 7), 16);

                    previewText.style.boxShadow = `0 0 ${sBlur}px ${sSpread}px rgba(${shr}, ${shg}, ${shb}, 0.5)`;
                    break;
            }
        }

        // 切换边框类型
        function switchBorderType(type) {
            currentBorderType = type;

            // 更新按钮状态
            borderTypeBtns.forEach(btn => {
                btn.classList.toggle('active', btn.dataset.type === type);
            });

            // 显示对应的面板
            borderPanels.forEach(panel => {
                panel.classList.remove('active');
            });

            document.getElementById(`${type}BorderPanel`).classList.add('active');

            // 更新预览
            updatePreview();
        }

        // 事件监听器
        textInput.addEventListener('input', updatePreview);
        fontFamily.addEventListener('change', updatePreview);

        fontSize.addEventListener('input', () => {
            fontSizeValue.textContent = fontSize.value;
            updatePreview();
        });

        boldBtn.addEventListener('click', () => {
            textStyles.bold = !textStyles.bold;
            boldBtn.classList.toggle('active');
            updatePreview();
        });

        italicBtn.addEventListener('click', () => {
            textStyles.italic = !textStyles.italic;
            italicBtn.classList.toggle('active');
            updatePreview();
        });

        underlineBtn.addEventListener('click', () => {
            textStyles.underline = !textStyles.underline;
            underlineBtn.classList.toggle('active');
            updatePreview();
        });

        textColor.addEventListener('input', () => {
            textColorHex.value = textColor.value;
            updatePreview();
        });

        textColorHex.addEventListener('input', () => {
            if (/^#[0-9A-F]{6}$/i.test(textColorHex.value)) {
                textColor.value = textColorHex.value;
                updatePreview();
            }
        });

        // 边框类型切换
        borderTypeBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                switchBorderType(btn.dataset.type);
            });
        });

        // 基础边框事件
        borderStyle.addEventListener('change', updatePreview);

        borderWidth.addEventListener('input', () => {
            borderWidthValue.textContent = borderWidth.value;
            updatePreview();
        });

        borderColor.addEventListener('input', () => {
            borderColorHex.value = borderColor.value;
            updatePreview();
        });

        borderColorHex.addEventListener('input', () => {
            if (/^#[0-9A-F]{6}$/i.test(borderColorHex.value)) {
                borderColor.value = borderColorHex.value;
                updatePreview();
            }
        });

        // 实心边框事件
        solidBorderWidth.addEventListener('input', () => {
            solidBorderWidthValue.textContent = solidBorderWidth.value;
            updatePreview();
        });

        solidBorderColor.addEventListener('input', () => {
            solidBorderColorHex.value = solidBorderColor.value;
            updatePreview();
        });

        solidBorderColorHex.addEventListener('input', () => {
            if (/^#[0-9A-F]{6}$/i.test(solidBorderColorHex.value)) {
                solidBorderColor.value = solidBorderColorHex.value;
                updatePreview();
            }
        });

        // 虚线边框事件
        dashedBorderWidth.addEventListener('input', () => {
            dashedBorderWidthValue.textContent = dashedBorderWidth.value;
            updatePreview();
        });

        dashedBorderDash.addEventListener('input', () => {
            dashedBorderDashValue.textContent = dashedBorderDash.value;
            updatePreview();
        });

        dashedBorderColor.addEventListener('input', () => {
            dashedBorderColorHex.value = dashedBorderColor.value;
            updatePreview();
        });

        dashedBorderColorHex.addEventListener('input', () => {
            if (/^#[0-9A-F]{6}$/i.test(dashedBorderColorHex.value)) {
                dashedBorderColor.value = dashedBorderColorHex.value;
                updatePreview();
            }
        });

        // 渐变边框事件
        gradientBorderWidth.addEventListener('input', () => {
            gradientBorderWidthValue.textContent = gradientBorderWidth.value;
            updatePreview();
        });

        gradientColor1.addEventListener('input', () => {
            gradientColor1Hex.value = gradientColor1.value;
            updatePreview();
        });

        gradientColor1Hex.addEventListener('input', () => {
            if (/^#[0-9A-F]{6}$/i.test(gradientColor1Hex.value)) {
                gradientColor1.value = gradientColor1Hex.value;
                updatePreview();
            }
        });

        gradientColor2.addEventListener('input', () => {
            gradientColor2Hex.value = gradientColor2.value;
            updatePreview();
        });

        gradientColor2Hex.addEventListener('input', () => {
            if (/^#[0-9A-F]{6}$/i.test(gradientColor2Hex.value)) {
                gradientColor2.value = gradientColor2Hex.value;
                updatePreview();
            }
        });

        // 圆角边框事件
        roundBorderRadius.addEventListener('input', () => {
            roundBorderRadiusValue.textContent = roundBorderRadius.value;
            updatePreview();
        });

        roundBorderColor.addEventListener('input', () => {
            roundBorderColorHex.value = roundBorderColor.value;
            updatePreview();
        });

        roundBorderColorHex.addEventListener('input', () => {
            if (/^#[0-9A-F]{6}$/i.test(roundBorderColorHex.value)) {
                roundBorderColor.value = roundBorderColorHex.value;
                updatePreview();
            }
        });

        // 阴影边框事件
        shadowSpread.addEventListener('input', () => {
            shadowSpreadValue.textContent = shadowSpread.value;
            updatePreview();
        });

        shadowBlur.addEventListener('input', () => {
            shadowBlurValue.textContent = shadowBlur.value;
            updatePreview();
        });

        shadowColor.addEventListener('input', () => {
            shadowColorHex.value = shadowColor.value;
            updatePreview();
        });

        shadowColorHex.addEventListener('input', () => {
            if (/^#[0-9A-F]{6}$/i.test(shadowColorHex.value)) {
                shadowColor.value = shadowColorHex.value;
                updatePreview();
            }
        });

        // 通用设置事件
        padding.addEventListener('input', () => {
            paddingValue.textContent = padding.value;
            updatePreview();
        });

        bgColor.addEventListener('input', () => {
            bgColorHex.value = bgColor.value;
            updatePreview();
        });

        bgColorHex.addEventListener('input', () => {
            if (/^#[0-9A-F]{6}$/i.test(bgColorHex.value)) {
                bgColor.value = bgColorHex.value;
                updatePreview();
            }
        });

        // 初始化
        updatePreview();
    </script>
</body>
</html>