一、RGB 颜色数值范围
1. 标准 RGB
- 格式：
rgb(红, 绿, 蓝) - 每个值范围：0 ~ 255
- 0 = 最暗（黑色），255 = 最亮
color: rgb(255, 0, 0); /* 纯红 */
color: rgb(0, 255, 0); /* 纯绿 */
color: rgb(0, 0, 255); /* 纯蓝 */
color: rgb(0, 0, 0); /* 黑 */
color: rgb(255,255,255);/* 白 */
2. RGBA（带透明度）
- 格式：
rgba(红,绿,蓝, 透明度) - 透明度范围：0 ~ 1
- 0 = 完全透明
- 1 = 完全不透明
background: rgba(0,0,0, 0.5); /* 半透明黑 */
二、justify 相关（弹性布局对齐）
主要用于 Flex 布局，给父元素设置：
display: flex;
1. justify-content（主轴对齐，默认水平）
| 属性值 | 效果 |
|---|---|
flex-start |
默认，靠左/上对齐 |
flex-end |
靠右/下对齐 |
center |
居中（最常用） |
space-between |
两端对齐，中间自动平分间距 |
space-around |
每个子元素左右都有间距 |
space-evenly |
所有间距完全相等 |
常用示例：
display: flex;
justify-content: center; /* 水平居中 */
2. justify-items / justify-self（网格布局用）
justify-items：给网格父元素，设置子元素水平对齐justify-self：给子元素自己，单独设置水平对齐
三、圆角样式 border-radius
1. 基础用法
border-radius: 数值;
- 单位：
px/% - 值越大，角越圆
2. 常用写法
border-radius: 8px; /* 四个角统一 */
border-radius: 50%; /* 正圆/椭圆（常用头像） */
border-radius: 9999px; /* 胶囊按钮（最稳） */
3. 分别设置四个角
顺序：左上 → 右上 → 右下 → 左下
border-radius: 10px 20px 30px 40px;
4. 单独设置一个角
border-top-left-radius: 15px; /* 左上角 */
border-top-right-radius: 15px; /* 右上角 */
border-bottom-left-radius: 15px; /* 左下角 */
border-bottom-right-radius: 15px; /* 右下角 */
总结
- RGB：0~255；RGBA 透明度：0~1
- justify-content: center 是 flex 水平居中最常用
- border-radius: 50% 圆形；9999px 胶囊按钮；px 普通圆角
注：文章部分内容使用ai润色，主体为课堂笔记