CSS 文本与视觉样式
CSS 中最常见的文本排版、背景、边框、圆角和阴影等视觉样式主线。
#type / concept
#status / growing
#resource / css
#tech / dev / frontend
[!info] related notes
- 所属 MOC: CSS MOC
- 相关知识: box-shadow-detailed-guide, css-media-print
- 上位主题: CSS
CSS 文本与视觉样式
布局决定结构，视觉样式决定页面有没有层次、可读性和质感。
文本排版最常见的属性
font-familyfont-sizefont-weightfont-styleline-heightletter-spacingtext-aligntext-decoration
其中最重要的常常不是字体本身，而是：
- 行高
- 对齐
- 溢出处理
文本溢出是高频实战点
单行省略
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;多行省略
常见写法是基于 -webkit-line-clamp。
背景相关
常见属性：
background-colorbackground-imagebackground-repeatbackground-positionbackground-size
最常见的场景是：
- 封面图
- 渐变背景
- 卡片背景
边框、圆角、阴影
边框
border: 1px solid #ddd;圆角
border-radius: 8px;阴影
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);最短记忆方式
文本样式保证可读性，背景边框阴影负责层次感和组件质感。