css速查表

发表于 2026-02-03 更新于 2026-03-28 分类于工具， css 阅读次数： Waline：阅读次数：

1、border边框和圆角

border: 1px solid #fff

1px：边框宽度为 1 像素
solid：边框样式为实线（常见的还有 dashed 虚线、dotted 点线）
#fff：边框颜色是纯白色（#ffffff 的简写）

solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。

border-width: 2px 1px 3px 4px; 分别代表上、右、下、左四个方向的边框宽度。

border-radius: 5px 10px 5px 10px; 分别代表左上、右上、右下、左下四个角的圆角半径。

2、z-index图层

z-index: -1

z-index 只在有 定位属性（position: relative / absolute / fixed / sticky） 的元素上才会真正生效。

在 CSS 中，z-index 属性用于控制元素的堆叠顺序（stacking order）。具有更高 z-index 值的元素会覆盖具有较低 z-index 值的元素。z-index 可以是整数、负数或 auto。如果多个元素具有相同的 z-index 值，则它们的堆叠顺序取决于它们在文档流中的位置，后出现的元素会覆盖先出现的元素。

和ps中的图层一个道理，值越大图层越靠前

3、font-系列、字体相关属性

1. font-size → 字体大小

font-size: 16px;

2. font-weight → 字体粗细

font-weight: bold;

常见值：

normal（默认，400）
bold（加粗，700）
100 ~ 900（数字越大越粗，常用 400 = normal，700 = bold）

3. font-style → 字体样式

font-style: italic;

常见值：

normal（默认）
italic（斜体，通常使用字体自带的斜体样式）
oblique（倾斜，直接把文字“歪”过去）

4. line-height → 行高（文字上下的间距）

line-height: 1.5;

可以写数字（倍数，推荐 1.5）
也能用单位 → line-height: 24px;
常用来让文字更容易阅读

4、text-decoration下划线

text-decoration 是 CSS 属性之一，用于指定文本的装饰效果，例如下划线、删除线等。主要用于控制文本的装饰效果，有以下几种常见的值：

1. none: 默认值，没有装饰。
2. underline: 给文本添加下划线。
3. overline: 给文本添加上划线。
4. line-through: 给文本添加删除线。
5. underline     overline: 同时添加上划线和下划线。
6. underline     line-through: 同时添加下划线和删除线。
7. inherit: 继承父元素的 text-decoration 值。

   

## 5、background背景


background: transparent;

- 一般开发时先给个背景色，方便看布局。
- 后期如果不需要颜色，就改成 `transparent`（透明）。


min-height: 100vh; /* 保证背景图撑满屏幕高度 */
background: url('background.jpg') no-repeat;
background-size: cover;     /* 背景图按比例放大/缩小，始终覆盖整个容器 */
background-position: center;/* 背景图居中显示 */

- **`100vh`** → 视口高度的 100%，确保满屏。
- **`background: url(...) no-repeat;`** → 设置背景图片，不重复平铺。
- **`background-size: cover;`** → 图片等比例放大/缩小，保证覆盖整个容器（可能会裁剪）。
- **`background-position: center;`** → 图片居中显示。



## 6、filter模糊、亮度、对比度、灰度

![image-20250824171629668](https://zxztypora.oss-cn-hangzhou.aliyuncs.com/20250824171629780.png)



## 7、cursor鼠标样式

![image-20250824171744780](https://zxztypora.oss-cn-hangzhou.aliyuncs.com/20250824171744851.png)



## 8、opacity透明度


opacity：0.5

opacity 是 CSS 属性之一，用于设置元素的不透明度级别。它的取值范围是从 0 到 1，其中 0 表示完全透明，1 表示完全不透明。



## 9、伪类


/* 伪类 */
:hover { /* 鼠标悬停 */
  color: red;
}
:focus { /* 元素获得焦点 */
  outline: 2px solid blue;
}
:active { /* 元素被激活（点击） */
  background-color: gray;
}

/* 伪元素 /
::before { / 在元素前插入内容 /
content: “★”;
color: gold;
}
::after { / 在元素后插入内容 */
content: “→”;
color: blue;
}




## 10、transform变换

transform: translate(50px, 100px); /* 平移：x 轴 50px，y 轴 100px /
transform: rotate(45deg); / 旋转 45 度 /
transform: scale(1.2); / 放大 1.2 倍 /
transform: skew(10deg, 20deg); / 倾斜：x 轴 10 度，y 轴 20 度 */




## 11、Transition过渡

transition: all 0.3s ease; /* 所有属性变化，持续 0.3 秒，缓动效果 /
transition: background-color 0.5s linear; / 仅背景色变化，持续 0.5 秒，线性过渡 */




## 12、常用大小单位

/* 百分比：相对于父元素对应属性的百分比 /
width: 50%; / 父元素宽度的 50% /
font-size: 120%; / 父元素字体大小的 120% */

/* rem：相对于根元素（）的字体大小 /
font-size: 1.5rem; / 根元素字体大小的 1.5 倍 */
margin: 2rem;

/* em：相对于父元素的字体大小 /
padding: 1em; / 父元素字体大小的 1 倍 */
line-height: 1.5em;

/* vw：视口宽度的 1% /
width: 50vw; / 视口宽度的 50% */

/* vh：视口高度的 1% /
height: 100vh; / 视口高度的 100% */

1、border边框和圆角

2、z-index图层

3、font-系列、字体相关属性

4、text-decoration下划线

站点概览