常用css代码片段
移动端1px方案
方案1(版本较低机型存在粗细不均,细线消失断裂)
.border_bottom{
overflow:hidden;
position:relative;
border:none!important;
}
.border_bottom:after{
content:".";
position:absolute;
left:0;
bottom:0;
width:100%;
height:1px;
background-color:#d4d6d7;
-webkit-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:scaleY(0.5);
transform:scaleY(0.5);
}
方案2 (颜色会变浅)
.border-bottom{
box-shadow:inset 0px -1px 1px -1px #000000;
}
从html元素继承box-sizing
html{
box-sizing:border-box;
}
*,*:before,*:after{
box-sizing:inherit;
}
文字超出省略
.line-camp(@clamp:2){
text-overflow:-o-ellipsis-lastline;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:@clamp;
/*! autoprefixer:off */
/*!防止optimize-css-assets-webpack-plugin 打包删除以下代码 */
-webkit-box-orient:vertical;
/*! autoprefixer:on */
}
两端对齐
div{
margin:10px 0;
width:100px;
border:1px solid red;
text-align-last:justify;
}
调整全局滚动条样式
*::-webkit-scrollbar {
width:4px;
height: 4px;
}
*::-webkit-scrollbar-thumb {
border-radius:10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
*::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
背景图占满高度
.img{
width: 200px;
background-image: url("1.jpg");
background-size: 100%;
background-repeat: no-repeat;
}
.img::after{
content: "";
display: block;
/* 高/宽/2 */
padding: 100%;
}