css

CSS常用样式

常用css代码片段

Posted by LSC on June 25, 2019

常用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%;
}