• Css(常用的特殊效果)


    一、前言                                                                             

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

    二、主要内容                                                                      

    1、几个特殊效果

    $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

    2、使用2x 3x图做五星

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
     .star.star-24 .star-item {
      width: 10px;
      height: 10px;
      margin-right: 3px;
      background-size: 10px 10px;
    }
    .star.star-24 .star-item:last-child {
      margin-right: 0;
    }
     .star.star-24 .star-item.on {
      background-image: url("../images/stars/star24_on@2x.png");
    }
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
       .star.star-24 .star-item.on {
        background-image: url("../images/stars/star24_on@3x.png");
      }
    }
     .star.star-24 .star-item.half {
      background-image: url("../images/stars/star24_half@2x.png");
    }
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
      .star.star-24 .star-item.half {
        background-image: url("../images/stars/star24_half@3x.png");
      }
    }
    .star.star-24 .star-item.off {
      background-image: url("../images/stars/star24_off@2x.png");
    }
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
       .star.star-24 .star-item.off {
        background-image: url("../images/stars/star24_off@3x.png");
      }
    }
    span{
        display: inline-block;
    }
    </style>
    </head>
    <body>
        <div class="star star-24">
            <span class="star-item on"></span>
            <span class="star-item on"></span>
            <span class="star-item on"></span>
            <span class="star-item half"></span>
            <span class="star-item off"></span>
        </div>
    </body>
    </html>
    虽然现在走得很慢,但不会一直这么慢
  • 相关阅读:
    第二个月课堂009python之总结(002)
    python的接口自动化测试+ddt数据驱动(*****)
    python题(002)
    selenium问题归纳一:多个句柄索引会乱的问题
    多测师讲解python讲解__xlwt__模块(拓展莫模块002)
    多测师python面试题__整理和答案(001)高级讲师肖sir
    第二个月课堂012讲解 _ Unittest框架(上)_高级讲师肖sir
    多测师讲解课堂11课__selenium__错归纳_高级讲师肖sir
    ActionChains定位元素
    css使用方法
  • 原文地址:https://www.cnblogs.com/xxm980617/p/10786451.html
Copyright © 2020-2023  润新知