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;
}