关于CSS的一些零碎应用整理

1 隐藏滚动条

.menuList::-webkit-scrollbar { 
    display:none 
}

1 :after+content 清除浮动

// 是给浮动元素的父元素加上
.floatEleParent::after{
    display:block; 
    content:"clear"; 
    height:0;
    clear:both; 
    overflow:hidden; 
    visibility:hidden;
}

3 select 去掉默认的下拉箭头

select {
    appearance:none;  
    -moz-appearance:none;  
    -webkit-appearance:none;
}

4 修改input placeholder 样式

input::-moz-placeholder {
    color:#7DC0B8; font-size:16px;
}

5 background linear-gradient 线性渐变 设置位置

// 从上到下 开始是#11998E 到62%开始渐变为#38EF7D
linear-gradient(#11998E 62%, #38EF7D);

// 渐变轴为45度，从蓝色渐变到红色 
linear-gradient(45deg, blue, red);

// 从右下到左上、从蓝色渐变到红色 
linear-gradient(to left top, blue, red);

// 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 
linear-gradient(0deg, blue, green 40%, red);

6 background-clip: text 背景被裁剪成文字的前景色

7 单行文字、多行文字溢出省略

// 单行文字
div {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

// 多行文字
div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

8