要用却记不住的 CSS 属性
# 要用却记不住的 CSS 属性
笔记
收集了一些我平时经常要用到的，但又总是记不住的样式。有错漏的地方欢迎与我交流。
# 一. input
# 1. placeholder 的字体样式
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: red;
}
input::-moz-placeholder { /* Firefox 19+ */
color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
color: red;
}
input:-moz-placeholder { /* Firefox 18- */
color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 2. focus 聚焦时的样式
input:focus {
background-color: red;
}
1
2
3
2
3
# 3. 取消 input 的边框
input {
border: none;
outline: none;
}
1
2
3
4
2
3
4
# 二. 滚动条样式
注意这几个名词，你就可以自由设置滚动条样式了
scroll-track—— 滚动条轨道scrollbar-thumb—— 滚动条滑块scrollbar-button—— 滚动条按钮scrollbar-corner—— 滚动角
/* css主要部分的样式 */
/* 定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸 */
::-webkit-scrollbar {
width: 10px; /* 对垂直流动条有效 */
height: 10px; /* 对水平流动条有效 */
}
/* 定义滚动条的轨道颜色、内阴影及圆角 */
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: rosybrown;
border-radius: 3px;
}
/* 定义滑块颜色、内阴影及圆角 */
::-webkit-scrollbar-thumb{
border-radius: 7px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #E8E8E8;
}
/* 定义两端按钮的样式 */
::-webkit-scrollbar-button {
background-color:cyan;
}
/* 定义右下角汇合处的样式 */
::-webkit-scrollbar-corner {
background:khaki;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 三. 文字超出隐藏并省略号
大家要注意这几个属性：
white-space———— 处理元素空白，常用值有：nowrap不换行，其他还有pre-line、pre-wrap等，大家可以自己尝试。word-break———— 在合适的点断行。常用值有break-all可以在单词内换行，keep-all 只能在半角空格或连字符处换行。我们需要超出盒子部分就换行，所以用break-all`。box-orient———— 子元素如何排列。值有vertical和horizontal，分别是垂直排列和水平排列。line-clamp———— 控制文本行数。
# 1. 单行（一定要有宽度）
.demo {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
1
2
3
4
5
6
2
3
4
5
6
# 2. 多行
.demo {
word-break: break-all;
display: -webkit-box; /* 自适应布局 */
-webkit-line-clamp: 2; /* 文本行数最多 2 行 */
-webkit-box-orient: vertical; /* 子元素垂直排列 */
overflow: hidden; /* 超出部分隐藏 */
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 四. div 内元素自动换行
.demo{
word-wrap: break-word; /* 允许长单词换行到下一行 */
word-break: break-all; /* 在哪儿换行都行，在单词内换行都行 */
}
1
2
3
4
2
3
4
# 五. 纯 css 三角形
.demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 六. 绝对定位元素居中（水平和垂直方向）
.demo {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: green;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 七. 表格边框合并
table,tr,td { border: 1px solid #333; }
table{
border-collapse: collapse;
}
1
2
3
4
2
3
4
上次更新: 2022/07/01, 17:34:19