1,改变IOS默认button圆角样式:
-webkit-appearance:none;
outline: none;
2,调用拨打电话:
<a href="tel:021-88888888">立即咨询</a>
3,发送邮件:
<a href="mailto:zjgoing@gmail.com">发送邮件</a>
4,图片适应缩放:
object-fit: cover;
5,人民币,美元符号,使用<i></i>标签或者其他标签包括,避免显示诶方框问题:
<i class="price">¥</i>
6,为图片添加渐变遮罩:
HTML:
<div class="md-banner">
<img src="images/test.jpg" alt="测试图片">
<i class="md-banner-cover"></i>
<p class="md-title">测试图片</p>
</div>
CSS:
.md-banner{
position: relative;
overflow: hidden;
display: block;
width: 100%;
height: 240px;
border: 1px solid #ddd;
}
.md-banner img{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
object-fit:cover;
}
.md-banner-cover{
display: inline-block;
position: absolute;
top: 0;
left: 0;
background-image: -moz-linear-gradient( 90deg, rgba(0,0,0,0.30196) 0%, rgba(0,0,0,0) 100%);
background-image: -webkit-linear-gradient( 90deg, rgba(0,0,0,0.30196) 0%, rgba(0,0,0,0) 100%);
background-image: -ms-linear-gradient( 90deg, rgba(0,0,0,0.30196) 0%, rgba(0,0,0,0) 100%);
z-index: 9;
width: 100%;
height: 100%;
}
.md-title{
position: absolute;
bottom: 5%;
left: 5%;
font-size: 1.4em;
color: #fff;
z-index: 10
}