常用css
背景
background-image: url(../images/about-index.jpg);
background-repeat: no-repeat;
background-size: cover, cover;
background-position: center;
过度效果
transition:all 1s linear 0s;
transition:all 1s ease 0s;
放大
transform: scale(1.05);
投影
box-shadow:4px 4px 10px #000000
宽度
Width:calc( 100% – 100px )
高度
height: 100vh;
表单选中不显示框
Outline:none
横线
.product h3:after{
content: “”;
width: 38px;
height: 2px;
background: #a3bbc8;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
图片Svg image
<svg width=”100%” height=”” ><image href=”” width=”100%” height=”100%”/></svg>
图片放大
(图片不是正方形是会发生错位)
<div class=”cp-1″><img src=”images/cp1.jpg” width=”100%”></div>
.cp-1{
padding: 20px;
transition:all 0.5s linear 0s;
}
.cp-1:hover{
padding: 0;
}
文字超出隐藏(一行)
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
文字超出隐藏(多行)
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
首行进
text-indent:2rem
letter-spacing:5px
返回上一页
<a href=”#” onClick=”javascript :history.back(-1);”>返回</a>
<a href=”#” onClick=”javascript :history.go(-1);”>返回上一页</a>
