欢迎使用 SunsetCSS

一个轻量级、现代化的CSS库，包含丰富的颜色、模糊效果和UI组件

快速开始

快速开始

1. 引入CSS文件

在您的HTML文件的``标签中引入SunsetCSS：

<link rel="stylesheet" href="https://css.ecuil.com/sunset.css">
<link rel="stylesheet" href="https://css.ecuil.com/fonts/fonts.css">

2. 开始使用

现在您可以在HTML中使用SunsetCSS提供的所有类：

<button class="btn btn-primary">点击我</button>
<div class="card">卡片内容</div>
<input type="text" class="input" placeholder="输入内容">

3. 项目结构

推荐的项目结构：

your-project/
├── index.html
├── sunset.css
└── fonts/
    ├── fonts.css
    ├── JasonHandwriting1.ttf
    ├── ChillBitmap7x.ttf
    ├── cinecaption2.28.ttf
    └── 爱点风雅黑.ttf

颜色系统

背景颜色类

使用`bg-{color}`类设置背景颜色：

bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
<div class="bg-primary">内容</div>

文本颜色类

使用`text-{color}`类设置文本颜色：

text-primary
text-secondary
text-success
text-danger
text-warning
text-info
text-dark
text-white
<p class="text-primary">这是蓝色文本</p>

渐变色类

使用`bg-gradient-{color}`类设置渐变背景：

bg-gradient-primary
bg-gradient-secondary
bg-gradient-success
bg-gradient-danger
<div class="bg-gradient-primary">渐变背景</div>

自定义颜色变量

您可以在CSS中使用CSS变量来自定义颜色：

.custom-box {
  background-color: var(--primary);
  color: var(--white);
}

可用的颜色变量：--primary, --secondary, --success, --danger, --warning, --info, --light, --dark, --white, --black

模糊效果

模糊滤镜类

使用`blur-{size}`类为元素添加模糊效果：

图案

Original

图案

blur-md

图案

blur-xl

图案

blur-3xl

<img class="blur-md" src="image.jpg" alt="模糊图片">

背景模糊类

使用`backdrop-blur-{size}`类为元素背景添加模糊效果：

背景
backdrop-blur-sm
背景
backdrop-blur-md
背景
backdrop-blur-lg
<div class="backdrop-blur-md">背景模糊内容</div>

模糊容器

使用`blur-container`类包裹模糊元素，防止模糊效果超出边界：

<div class="blur-container">
  <img class="blur-xl" src="image.jpg">
</div>

UI组件

按钮组件

使用`btn btn-{color}`类创建按钮：

<button class="btn btn-primary">点击我</button>

卡片组件

使用`card`类创建卡片，配合`card-header`、`card-body`、`card-footer`使用：

卡片标题

这是卡片内容区域

<div class="card">
  <div class="card-header">标题</div>
  <div class="card-body">内容</div>
  <div class="card-footer">操作</div>
</div>

表单组件

使用`input`、`select`、`file-input`类创建表单元素：

<input type="text" class="input" placeholder="输入内容">
<select class="select"><option>选项</option></select>

徽章组件

使用`badge badge-{color}`类创建徽章：

Primary Secondary Success Danger Warning Info
<span class="badge badge-primary">标签</span>

字体系统

字体族类

使用`font-{type}`类设置字体族：

无衬线字体

font-sans

衬线字体

font-serif

等宽字体

font-mono

手写字体

font-handwriting

<p class="font-sans">无衬线字体</p>
<p class="font-handwriting">手写字体</p>

字体大小类

使用`text-{size}`类设置字体大小：

text-xs (12px)
text-sm (14px)
text-base (16px)
text-lg (18px)
text-xl (20px)
text-2xl (24px)
text-3xl (30px)
text-4xl (36px)
<h1 class="text-3xl font-bold">大标题</h1>

字体粗细类

使用`font-{weight}`类设置字体粗细：

font-light (300)
font-normal (400)
font-medium (500)
font-semibold (600)
font-bold (700)
<span class="font-bold">粗体文本</span>

自定义字体

SunsetCSS包含7种自定义字体：

像素字体

font-pixel

电影字幕

font-cinecaption

爱点风雅黑

font-fengya

更多字体示例请查看 字体演示页面

布局系统

容器类

使用`container`类创建居中容器：

<div class="container">内容</div>

间距类

使用`p-{size}`和`m-{size}`类设置内边距和外边距：

p-xs (4px)
p-sm (8px)
p-md (16px)
p-lg (24px)
<div class="p-md m-lg">间距示例</div>

圆角类

使用`rounded-{size}`类设置圆角：

rounded-sm
rounded-md
rounded-lg
rounded-xl
<div class="rounded-lg">圆角元素</div>

阴影类

使用`shadow-{size}`类添加阴影：

shadow-sm
shadow-md
shadow-lg
shadow-xl
<div class="shadow-lg rounded-lg">阴影元素</div>

弹性布局类

使用`flex`相关类创建弹性布局：

<div class="flex justify-between items-center gap-md">
  <div>项目1</div>
  <div>项目2</div>
</div>

可用的flex类：flex, flex-col, items-center, justify-center, justify-between, gap-sm, gap-md, gap-lg

响应式设计

响应式断点

SunsetCSS内置响应式支持，在移动设备上自动调整布局：

移动设备

< 768px

单列布局，简化导航

平板设备

≥ 768px

双列布局，完整导航

桌面设备

≥ 1024px

多列布局，完整功能

@media (max-width: 768px) { }

最佳实践

✅ 推荐做法

  • ✓ 使用语义化的HTML标签
  • ✓ 组合使用多个类
  • ✓ 利用CSS变量自定义样式
  • ✓ 确保响应式设计
  • ✓ 保持代码简洁和可读性
  • ✓ 测试跨浏览器兼容性

❌ 避免做法

  • ✗ 过度使用内联样式
  • ✗ 忽视可访问性
  • ✗ 硬编码颜色值
  • ✗ 不测试移动端显示
  • ✗ 使用过时的CSS属性
  • ✗ 忽视性能优化

更多资源

博客示例

查看使用SunsetCSS构建的完整博客网站示例

查看博客

字体演示

探索SunsetCSS提供的所有字体样式和效果

查看字体

组件演示

查看所有UI组件的完整展示和用法