Css(常用的特殊效果)

一、前言                                                                                    

不得不说css真强大，总结了几个常用的css特殊效果

二、主要内容                                                                             

$green = #02a774;
$yellow = #F5A100;
$bc = #e4e4e4;

// 一像素下边框
bottom-border-1px($color)
    position relative
    border none
    &:after
        content ''
        position absolute
        left 0
        bottom 0
        width 100%
        height 1px
        background-color $color
        transform scaleY(0.5)

// 一像素上边框
top-border-1px($color)
    position relative
    &::before
        content ''
        position absolute
        z-index 200
        left 0
        top 0
        width 100%
        height 1px
        background-color $color

//根据像素比缩放1px 像素边框
@media only screen and (-webkit-device-pixel-ratio: 2 )
    .border-1px
        &::before
            transform scaleY(.5)
@media only screen and (-webkit-device-pixel-ratio: 3 )
    .border-1px
        &::before
            transform scaleY(.333333)

//根据像素比来使用2x 图3x 图
bg-image($url)
    background-image: url($url + "@2x.png")
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
        background-image: url($url + "@3x.png")

//清除浮动
clearFix()
    *zoom 1
    &::after
        content ''
        display block
        clear both