记录css的样式设置,方便以后使用。
1、绝对定位,自适应父级大小css:
.search-icon-delete {
background: url('../../assets/images/search_icon_deleteGray.png') no-repeat left center;
width: 40px;
height: 40px;
position: absolute;
right:;
top:;
}
html:
<input type="text" name="search" id="search" value="" placeholder="" style="padding-left:45px;"/>
<span class="search-icon-delete" style="display:none"></span>
效果:
2、图片放置到文本框中:
#phone {
background: url('../image/me_icon_kefu@2x.png') no-repeat left center;
background-size: 30px;
}
效果:
3、按钮颜色渐变:
#add_tourist {
background-image: linear-gradient(-90deg, #FF8126 0%, #F74A1C 100%);
}
效果:
4、内容超过两行隐藏
.text-box {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:;
overflow: hidden;
}
效果: