zoukankan      html  css  js  c++  java
  • 分隔符

    贯穿渐变线,中间插值

    • 如图:

    在这里插入图片描述

    在这里插入图片描述

    <h3 class="brief-modal-title">
    <span>公告</span>
    </h3>
    
    .brief-modal-title
    position relative
    text-align center
    margin 15px auto 15px
    width 85px
    background-image linear-gradient(90deg, #fff, #333 50%, #fff)
    background-size 100% 1px
    background-position 50%
    background-repeat no-repeat
    > span
    font-size 12px
    padding 0 6px
    color #999
    background-color #fff
    

    徽章

    • 如图:

    在这里插入图片描述

    <span class="content-tag">
    <span class="mini-tag">品牌</span>
    </span>
    
    .content-tag
    display inline-block
    border-radius 2px
    background-image linear-gradient(90deg, #fff100, #ffe339)
    width 36px
    height: 18px
    margin-right 10px
    color #6a3709
    font-style normal
    position relative
    .mini-tag
    position absolute
    left 0
    top 0
    right -100%
    bottom -100%
    font-size 24px
    transform scale(.5)
    transform-origin 0 0
    display flex
    align-items center
    justify-content center
    

    图标箭头

    如图:

    在这里插入图片描述
    在这里插入图片描述

    // 箭头由伪元素构成
    <i class="content-icon"></i>
    
    #################分隔符
    
    <div class="discounts-right">4 个优惠</div>
    
    .content-icon
    width 20px
    position relative
    height 16px
    &::after
    content ""
    border-style solid
    border- 6px 0 6px 7px
    border-color transparent transparent transparent rgba(0, 0, 0, .67)
    position absolute
    left 8px
    top 3px
    
    #################分隔符
    
    .discounts-right
    width 50px
    flex-shrink 0
    position relative
    padding-right 10px
    text-align right
    &::after
    content ""
    display block
    border-style solid
    border-width 4px 4px 0
    border-color rgba(0, 0, 0, .57) transparent transparent
    position absolute
    top 50%
    transform translateY(-50%)
    right 0
    

    不常见样式收集

    will-change transform
    
  • 相关阅读:
    基于RMAN从活动数据库异机克隆(rman duplicate from active DB)
    包含min函数的栈
    栈的链表实现
    HDU 2196 树形DP Computer
    linux之access函数解析
    [置顶] sqlplus 使用笔记
    仿新浪微博登陆邮箱提示效果!
    找出数组中出现奇数次的元素<异或的应用>
    SOA体系结构基础培训教程-规范标准篇
    一个寻找.jar 和.zip文件中class文件的工具
  • 原文地址:https://www.cnblogs.com/izhaong/p/10824495.html
Copyright © 2011-2022 走看看