文本超出宽度显示省略号
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;
}