1. css編寫超出元素寬度的中文顯示省略號
p{
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2; // 顯示的行數(shù)
-webkit-box-orient: vertical;
overflow: hidden;
}
2. 只顯示一行文字
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
3. 移動端橫向滾動
ul {
-webkit-overflow-scrolling: touch; // IOS設(shè)備滑動流暢 允許獨立的滾動區(qū)域和觸摸回彈
white-space: nowrap; // 不換行
overflow-y: hidden; // 設(shè)置橫向可滾動
}
ul li {
display: inline-block;
}
4. 清除input border fouce陰影
input {
outline: none;
}
5. css三角形
.triangle-up {
height: 0;
width: 0;
border: 12px #e5c3b2 solid;
border-color: transparent transparent #e5c3b2 transparent;
}
6. line-height 比 height 多一，這樣就上下居中了
ul li {
height: 30px;
line-height: 31px;
}
7. 背景圖片固定不動
.parent-box {
height: 100px;
background: url('') center center no-repeat fixed;
background-size: cover;
}
8. hover動效
div {
transform: translateY(-100%);
transition: .2s all ease-in-out;
&:hover {
transform: translateY(100%);
}
}
9. 清空select樣式
select {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
10. 點擊鏈接彈出撥打電話號碼
<a class="contact-box" href="tel:400-167167-24167">
11. ios移動端滑動優(yōu)化：
.list{
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
