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;
}

11.实现placeholder 换颜色

1
2
3
4

input::-webkit-input-placeholder{
    color:#fff;
}

12.解决css3 flex布局折行的问题

1
2
3
4
5
6
7
8
9

.flex-container {
    display: flex;
    /* 关键是这一句 */
    flex-wrap: wrap;
    .flex-item{
        flex: 0 0 25%;
    }
}

13.禁止ios微信长按保存图片

1
2
3
4

img {
    pointer-events:none;
}

14.让物体有立体感的阴影样式

1
2
3
4

.box {
    box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
}

15.使用nth-child选中奇偶数

1
2
3

:nth-child(odd)  /* 奇数 */
:nth-child(even)  /* 偶数 */