CSS 样式演示

基于 ApartKP 个人主页风格的独立 CSS 组件库

按钮组件

主要按钮
使用渐变背景,适合主要操作

边框按钮
透明背景配边框,适合次要操作

图标按钮
可配合图标使用

卡片组件

基础卡片

这是一个基础的卡片组件,带有半透明背景和微妙的边框效果。

悬停效果

鼠标悬停时边框会发光,并出现上浮动效。

灵活布局

配合 Grid 布局,自动响应不同屏幕宽度。

表单组件

色彩变量

CSS 变量

在 CSS 中使用这些变量:

:root {
    --primary: #00f2ff;   /* 青色 - 主色调 */
    --secondary: #ff00aa; /* 粉色 - 副色调 */
    --accent: #8b5cf6;    /* 紫色 - 强调色 */
    --dark: #0a0a0f;      /* 深黑 - 背景 */
}
primary
secondary
accent
dark

技能标签

HTML/CSS JavaScript React Vue Node.js Python