css12个常用技巧 |css手机网页字体

// 1. 文字溢出省略号
.ellipsis {
white-space: nowrap; 
overflow: hidden;
text-overflow: ellipsis;
}
// 2. 元素绝对居中
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// 3. 渐变背景色
.gradient {
background: linear-gradient(to right, #9B1F2A, #ED1C24);
}
// 4. 盒子阴影
.shadow {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
// 5. 触摸高亮
.touch-highlight {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout:none;
}
// 6. 文字渐变色
.text-gradient {
background: -webkit-linear-gradient(#E53935, #2196F3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
// 7. 元素滚动
.scroll {
overflow: auto;
}
// 8. 单行文本居中
.text-center {
text-align: center;
line-height: 32px;
}
// 9. 水平垂直居中
.middle {
display: flex;
justify-content: center;
align-items: center;
}
// 10. 文本颜色反色
.invert {
color: #FFF;
background-color: #000;
}
// 11. 图片填充
.image-fill {
object-fit: cover;
}
// 12. 清除默认样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

这些技巧可以通过CSS轻松实现不同的效果并提升网页的用户体验。通过巧妙地运用CSS，可以打造出更具有吸引力的页面。