css 语法

# css 常用语法

# 常用速记样式

a标签去掉下划线：text-decoration: none;
li去掉点：list-style-type: none;
字体粗细：font-weight: bold;
字体间距：letter-spacing: 1px;

背景自适应宽高:
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;

背景不重复：background-repeat: no-repeat;

transform兼容性写法：transform: rotate(7deg);
-ms-transform: rotate(7deg); /* IE 9 */
-moz-transform: rotate(7deg); /* Firefox */
-webkit-transform: rotate(7deg); /* Safari 和 Chrome */
-o-transform: rotate(7deg); /* Opera */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 单行文本溢出省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

1
2
3

# 多行字体超出用省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 2;

1
2
3
4
5
6
7

注意：不生效需要加上面的两行注释 https://github.com/postcss/autoprefixer/issues/776 (opens new window)

# 滚动条样式

::-webkit-scrollbar 滚动条整体部分

::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）

::-webkit-scrollbar-track 滚动条的轨道（里面装有 Thumb）

::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。

::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）

::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处

::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

隐藏滚动条：

::-webkit-scrollbar {
  display: none;
}

1
2
3

# css3 渐变样式

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

左上到右下渐变

background: -webkit-linear-gradient(
  left top,
  #fd3631,
  #ec46a4
); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(
  bottom right,
  #fd3631,
  #ec46a4
); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(
  bottom right,
  #fd3631,
  #ec46a4
); /* Firefox 3.6 - 15 */
background: linear-gradient(
  to bottom right,
  #fd3631,
  #ec46a4
); /* 标准的语法 必须在最后  颜色后面不能跟100%*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

径向渐变（Radial Gradients）- 由它们的中心定义

更新时间: 12/28/2021, 6:23:00 PM

← css 问题汇总 css 技术文章→