CSS 代码片段库

汇集高频使用的 CSS 布局、文本效果和 UI 组件代码生成器。

纯 CSS 三角形

Shape

使用 Border 生成三角形

width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 20px;
border-color: transparent transparent #FF5722 transparent;

完美圆形

Shape

正圆或胶囊形状

width: 50px;
height: 50px;
background-color: #3B82F6;
border-radius: 50%;

Flex 居中

Layout

万能的绝对居中布局

display: flex;
justify-content: center;
align-items: center;
flex-direction: row;

Grid 居中

Layout

最简短的居中写法 (place-items)

display: grid;
place-items: center;

固定宽高比

Layout

保持容器比例 (如 16:9)

aspect-ratio: 16 / 9;
object-fit: cover;
Text

单行截断

Text

超出部分显示省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
Text

多行截断

Text

限制显示行数 (Webkit)

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
Text

文字渐变

Text

背景裁剪实现的文字渐变色

background: linear-gradient(to right, #8b5cf6, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
UI

毛玻璃效果

Effect

流行的背景模糊风格

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
UI

自定义滚动条

UI

美化浏览器默认滚动条

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
UI

禁止选中

UI

防止用户复制文本

user-select: none;
-webkit-user-select: none;