梁小新blog

记录常用css代码片段

Posted on
border-1px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
&::after {  
    content: ''; 
    position: absolute;
    top: 0; 
    left: 0; 
    width: 200%;
    height: 200%;
    -webkit-transform: scale(.5); 
    transform: scale(.5); 
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0; 
    pointer-events: none; 
    box-sizing: border-box;
    border: 0 solid #ccc;
    border-left-width: 1px;
}
单行省略
1
2
3
4
5
.txt{
    overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
多行省略
1
2
3
4
5
6
.txt {
    display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
css强制换行
1
2
3
4
.txt {
    white-space:normal;
	word-break:break-all;
}
更改文本选择样式
1
2
3
4
.txt::selection {
  background: deeppink;
  color: white;
}
清除浮动
1
2
3
4
5
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
滚动条样式
1
2
3
4
5
6
7
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
使文本内容无法选择
1
user-select: none;
文字渐变
1
2
3
4
5
.gradient-text {
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
css切换开关
1
2
<input type="checkbox" id="toggle" class="offscreen" />
<label for="toggle" class="switch"></label>
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
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  transition: all 0.3s;
}
.switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}
input[type='checkbox']:checked + .switch::after {
  transform: translateX(20px);
}
input[type='checkbox']:checked + .switch {
  background-color: #7983ff;
}
.offscreen {
  position: absolute;
  left: -9999px;
}
1
document.querySelector('#toggle').checked