1.设置input[type=text]为隐藏状态 **

1
2
3
4

input {
-webkit-text-security: disc;
}

2.禁止页面复制文字

1
2
3
4

html {
-webkit-user-select:none;
}

3.设置IOS丝滑滚动条效果

1
2
3
4

html {
-webkit-overflow-scrolling : touch;
}

4.ios实现背景虚拟化

1
2
3
4

html {
backdrop-filter:blur(10px);
}

5.实现单行文字溢出隐藏显示 …

1
2
3
4
5
6

.text {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

6.实现多行文字溢出隐藏显示 …

1
2
3
4
5
6
7
8
9

.text {
white-space:normal;
-webkit-line-clamp:3; // 表示限制三行
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-box-orient:vertical;
}

7.实现边框半透明

1
2
3
4
5
6
7
8

.box {
width:200px;
height:200px;
border:10px solid rgba(255,255,255,.5);
background:white;
background-clip:padding-box;
}

8.解决使用flex,而低版本的安卓宽度不一致

1
2
3
4
5

.box {
flex:1;
width:1%; // 解决低版本安卓宽度不一致
}

9.实现placeholder 换行

1
2
3
4
5

input::-webkit-input-placeholder::after{
display: inline-block;
content: "1、掌握财产线索或能找到财产线索\A 2、熟悉债务人或担保人";
}

10.解决某些浏览器记住密码后显示黄色背景的解决方法

1
2
3
4
5
6

input:-webkit-autofill {
background-color : #FAFFBD;
background-image : none;
color : #000;
}