风格详情 - 玻璃拟态

关于此风格

玻璃拟态（Glassmorphism）是一种模拟磨砂玻璃效果的界面设计风格。它通过背景模糊、半透明、微妙的边框和光泽效果，创造出一种轻盈、分层且具有现代感的视觉体验。

这种风格的关键在于元素看起来像是漂浮在彩色、模糊的背景之上，如同隔着一层磨砂玻璃看世界。

主要特点:

背景模糊 (Background Blur): 最核心的特征，使用 CSS 的 `backdrop-filter: blur(Xpx);` 属性让元素背后的内容模糊化。
透明度 (Transparency): 元素背景通常是半透明的，允许下层内容（模糊后的）隐约可见。通过 `background-color` 的 RGBA 或 HSLA 值设置。
微妙的边框 (Subtle Borders): 通常会有一个非常细微、半透明的白色或浅色边框，以模拟玻璃的边缘反光，增强元素的轮廓感。
多层级感 (Layered Approach): 玻璃拟态元素常常叠加在彩色或带有图案的背景之上，模糊效果使得层级关系更加清晰。
光泽效果 (Glossy Highlights): 有时会添加微妙的线性渐变或内部阴影来模拟光线照射在玻璃表面的效果，增加立体感。
鲜艳的背景 (Vibrant Backgrounds): 为了让模糊效果更明显、更有趣，底层背景通常色彩鲜艳或包含丰富的视觉元素。
可访问性考量 (Accessibility Concerns): 需要确保文本和前景元素与玻璃背景之间有足够的对比度，避免因背景复杂或模糊导致内容难以阅读。

玻璃拟态适用于需要现代感、科技感或轻盈感的界面，如仪表盘、卡片式布局、侧边栏、模态框等。但过度使用可能导致视觉混乱或性能问题（`backdrop-filter` 相对耗性能）。

示例 AI Prompt

Design a user interface element (like a settings card) using the glassmorphism style. It should have a frosted glass effect with a background blur (backdrop-filter), transparency (semi-transparent white background), a subtle 1px white border, and sit on top of a colorful, abstract gradient background. Ensure text inside has good contrast.

（中文解释：使用玻璃拟态风格设计一个用户界面元素（例如设置卡片）。它应该具有磨砂玻璃效果，包含背景模糊（backdrop-filter）、透明度（半透明白色背景）、一个微妙的 1px 白色边框，并放置在一个色彩丰富、抽象的渐变背景之上。确保内部文本具有良好的对比度。）

主题 CSS 代码片段

以下是将玻璃拟态风格应用为全局主题的核心 CSS 代码 (body.theme-glassmorphism):

/* 8. Glassmorphism Theme */
body.theme-glassmorphism {
    /* Vibrant background is key for the effect to pop */
    --page-bg: #ffffff; /* Fallback */
    /* Example Gradient: Use a more interesting one in practice */
    --page-bg-gradient: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
    /* Or use a background image */
    /* background-image: url('path/to/your/vibrant-background.jpg'); */
    /* background-size: cover; */
    /* background-attachment: fixed; */

    --text-color: #333333; /* Dark text for contrast on light glass */
    --heading-color: #111111;
    --link-color: #0056b3; /* Standard link color, ensure contrast */
    --link-hover-color: #003d80;
    --border-color: rgba(255, 255, 255, 0.3); /* The subtle glass border */

    /* Glass Effect Variables */
    --glass-bg: rgba(255, 255, 255, 0.25); /* Semi-transparent white */
    --glass-blur: 10px; /* Blur intensity */
    --glass-border-radius: 12px; /* Rounded corners common */
    --glass-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Soft shadow */
    --glass-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    /* Apply glass effect to cards by default */
    --card-bg: var(--glass-bg);
    --card-shadow: var(--glass-shadow);
    --card-hover-shadow: var(--glass-hover-shadow);
    --card-border-radius: var(--glass-border-radius);
    /* Add backdrop-filter and border directly to card or via a utility class */

    --header-bg: rgba(255, 255, 255, 0.15); /* More transparent header */
    --header-text-color: var(--heading-color);
    --header-shadow: none; /* Shadow handled by glass effect */
    /* backdrop-filter needed for header too */
    border-bottom: 1px solid var(--border-color); /* Glass edge */

    --footer-text-color: rgba(0, 0, 0, 0.7);
    --footer-bg: rgba(255, 255, 255, 0.1); /* Glassy footer */
    border-top: 1px solid var(--border-color);
    /* backdrop-filter needed for footer too */

    --button-bg: rgba(255, 255, 255, 0.4); /* Slightly less transparent button */
    --button-text-color: #111;
    --button-hover-bg: rgba(255, 255, 255, 0.6);
    --button-border: 1px solid rgba(255, 255, 255, 0.5); /* Button border */
    --button-secondary-bg: transparent;
    --button-secondary-text-color: var(--text-color);
    --button-secondary-hover-bg: rgba(255, 255, 255, 0.1);
    --button-secondary-border: 1px solid var(--border-color);

    --prompt-bg: rgba(0, 0, 0, 0.1); /* Darker glass for prompt */
    --prompt-text-color: #f0f0f0;
    /* backdrop-filter needed for prompt too */

    --base-font: var(--font-inter);
    --heading-font: var(--font-inter);
    --button-border-radius: 8px;
}

/* Utility class or direct application for the glass effect */
.glass-effect,
body.theme-glassmorphism .card,
body.theme-glassmorphism header, /* Apply directly if all headers are glass */
body.theme-glassmorphism footer, /* Apply directly if all footers are glass */
body.theme-glassmorphism .prompt-area /* Example */
{
    background: var(--glass-bg, rgba(255, 255, 255, 0.25));
    backdrop-filter: blur(var(--glass-blur, 10px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 10px)); /* Safari support */
    border-radius: var(--glass-border-radius, 12px);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.3));
    box-shadow: var(--glass-shadow, 0 5px 15px rgba(0, 0, 0, 0.1));
    /* Ensure content inside doesn't leak out */
    overflow: hidden; /* Can cause issues with dropdowns, use carefully */
}

/* Ensure the body has a background image or gradient for the effect */
body.theme-glassmorphism {
    background: var(--page-bg-gradient); /* Or background-image */
    background-attachment: fixed; /* Important for blur effect consistency */
    background-size: cover;
}

/* Adjust text color inside glass elements if needed for contrast */
body.theme-glassmorphism .card,
body.theme-glassmorphism .glass-effect {
    color: var(--text-color); /* Ensure text color is set */
}
body.theme-glassmorphism .card h1,
body.theme-glassmorphism .card h2,
body.theme-glassmorphism .card h3,
body.theme-glassmorphism .glass-effect h1,
body.theme-glassmorphism .glass-effect h2,
body.theme-glassmorphism .glass-effect h3 {
    color: var(--heading-color);
}

/* Hover effect for cards */
body.theme-glassmorphism .card:hover {
    box-shadow: var(--glass-hover-shadow);
    background: rgba(255, 255, 255, 0.35); /* Slightly less transparent on hover */
    transform: translateY(-3px); /* Optional: slight lift */
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

注意：玻璃拟态效果依赖于 `backdrop-filter` 属性，请检查浏览器兼容性。同时，确保背景足够丰富多彩，模糊效果才能明显。性能也是一个考量因素。

资源下载 (示例)

下载包含此风格更完整 CSS 定义（可能包括特定组件样式、字体文件引用等）的压缩包。

下载 glassmorphism.zip