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
    
  • 相关阅读:
    《时间的朋友》2017跨年演讲:观后感
    如何实现目标?
    不患贫而患不均
    科学地定目标(附我的目标)
    书单:我的“基本书”
    你只有非常努力,才能看起来毫不费力
    买书?买知识?
    论知识与技能
    【读书笔记】《代码不朽》
    【工作实践】如何创新?
  • 原文地址:https://www.cnblogs.com/izhaong/p/10824495.html
Copyright © 2011-2022 走看看