香草拿铁

CSS技巧合集

3/17/2020 css

# 1.css禁用鼠标事件

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}
1
2
3
4
5

# 2.css禁止用户选择

body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
1
2
3
4
5
6
7
8

# 3.修改chrome记住密码后自动填充的黄色背景

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189); /* #FAFFBD; */
    background-image: none;
    color: rgb(0, 0, 0);
  }
1
2
3
4
5

# 4.让页面里的字体变清晰，变细

-webkit-font-smoothing: antialiased;
1

# 5.让overflow:scroll平滑滚动

-webkit-overflow-scrolling: touch;
1

# 6.手机上的多行省略

.overflow-hidden{
    display: box !important;
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;/*第几行出现省略号*/
    /*text-align:justify;不能和溢出隐藏的代码一起写，会有bug*/
}
1
2
3
4
5
6
7
8
9

# 7.长事件按住页面闪退

.element {
    -webkit-touch-callout: none;
}
1
2
3

# 8.改变输入框内提示文字颜色

::-webkit-input-placeholder { /* WebKit browsers */
    color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }
1
2
3
4
5
6
7
8
9

# 9.消除transition闪屏

.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}
1
2
3
4
5

# 10.解决iOS滑动不流畅

  1. 在滚动容器上增加滚动 touch 方法
.wrapper {
    -webkit-overflow-scrolling: touch;
}
1
2
3

设置滚动条隐藏： .container ::-webkit-scrollbar {display: none;}
可能会导致使用position:fixed; 固定定位的元素，随着页面一起滚动

  1. 设置 overflow 设置外部 overflow为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。
body {
    overflow-y: hidden;
}
.wrapper {
    overflow-y: auto;
}
1
2
3
4
5
6

两者结合使用更佳！