CSS 文本超出行数显示省略号； 点击事件穿透； 禁止选中内容； 背景色渐变； 解决元素高度坍塌； 改变上传文件框样式为图片

文本超出宽度显示省略号

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

文本超出指定行数显示省略号 

word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;    // 要显示的行数

点击事件穿透

pointer-events: none;   

禁止选中内容

user-select:none;    

背景色渐变

background-image: linear-gradient(to right, red , yellow);   
// 'to tight bottom'就是从左上角到右下角的渐变

解决元素高度坍塌

<style>
    元素选择器:after {
        content: '';
        display: block;
        clear: both;
    }
</style>  

改变上传文件框样式为图片

<div class="home">
    <img src="图片路径">
    <input type="file">
</div>
.home{
    width: 70px;
    height: 25px;
    position: relative;
}
img {
    position: absolute;
    width: 70px;
    height: 25px;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 999;
}
input{
    position: absolute;
    width: 70px;
    height: 25px;
    top: 0;
    left: 0;
}