css属性大全

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
.box {
    width: 200px;              /* 宽度 */
    height: 100px;             /* 高度 */
    margin: 10px;              /* 外边距 */
    padding: 10px;             /* 内边距 */
    border: 2px solid black;   /* 边框 */
    box-sizing: border-box;    /* 盒模型 */
    display: block;            /* 显示方式 */
    position: relative;        /* 定位方式 */
    z-index: 1;                /* 堆叠顺序 */
    float: left;               /* 浮动方式 */
    clear: both;               /* 清除浮动 */
    flex: 1;                   /* 弹性布局 */
    grid-area: 1 / 1 / 2 / 2;  /* 网格布局 */
}

01
02
03
04
05
06
07
08
09
10
11
12
13
14
.text {
    color: blue;               /* 文本颜色 */
    font-family: Arial, sans-serif; /* 字体系列 */
    font-size: 16px;           /* 字体大小 */
    font-weight: bold;         /* 字体粗细 */
    font-style: italic;        /* 字体样式 */
    text-align: center;        /* 文本对齐方式 */
    text-decoration: underline; /* 文本装饰 */
    line-height: 1.5;          /* 行高 */
    letter-spacing: 1px;       /* 字母间距 */
    word-spacing: 2px;         /* 单词间距 */
    text-transform: uppercase;  /* 文本转换 */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 文本阴影 */
}

01
02
03
04
05
06
07
08
09
10
11
12
.background {
    background-color: yellow;  /* 背景颜色 */
    background-image: url('image.jpg'); /* 背景图像 */
    background-repeat: no-repeat; /* 背景图像不重复 */
    background-position: center; /* 背景图像居中 */
    background-size: cover;     /* 背景图像覆盖整个元素 */
    border-width: 2px;          /* 边框宽度 */
    border-style: solid;        /* 边框样式 */
    border-color: black;        /* 边框颜色 */
    border-radius: 10px;        /* 圆角 */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 阴影 */
}

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
.transform {
    transform: rotate(45deg);  /* 旋转 45 度 */
    transform: scale(1.5);     /* 放大 1.5 倍 */
    transform: translate(20px, 10px); /* 平移 20px 水平，10px 垂直 */
    transition: all 0.3s ease;  /* 所有属性在 0.3 秒内平滑过渡 */
}

@keyframes example {
    from { background-color: red; }
    to { background-color: yellow; }
}

.animation {
    animation: example 2s infinite; /* 动画名称，持续时间，重复次数 */
}

01
02
03
04
05
06
07
08
.visibility {
    visibility: visible; /* 可见 */
    visibility: hidden;  /* 隐藏，但占据空间 */
}

.opacity {
    opacity: 0.5; /* 50% 透明度 */
}

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.cursor {
    cursor: pointer; /* 指针形状 */
}

.overflow {
    overflow: visible;  /* 默认值，内容超出时可见 */
    overflow: hidden;   /* 内容超出时隐藏 */
    overflow: scroll;   /* 内容超出时显示滚动条 */
    overflow: auto;     /* 内容超出时根据需要显示滚动条 */
}

.white-space {
    white-space: normal;  /* 默认值，空白字符会被折叠 */
    white-space: pre;     /* 保留空白字符 */
    white-space: nowrap;  /* 不换行 */
}

.vertical-align {
    vertical-align: baseline; /* 基线对齐 */
    vertical-align: top;      /* 顶部对齐 */
    vertical-align: middle;   /* 居中对齐 */
    vertical-align: bottom;   /* 底部对齐 */
}

.list-style {
    list-style: disc;     /* 圆点 */
    list-style: square;   /* 方块 */
    list-style: none;     /* 无样式 */
}

::before {
    content: "前缀"; /* 插入内容 */
}

.counter {
    counter-reset: section; /* 重置计数器 */
    counter-increment: section; /* 递增计数器 */
}