zoukankan      html  css  js  c++  java
  • CSS 常见样式 特殊用法 贯穿线&徽章&箭头

    贯穿渐变线,中间插值

    • 如图:

    在这里插入图片描述

    在这里插入图片描述

    		<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-width: 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
    
  • 相关阅读:
    scala之伴生对象的继承
    scala之伴生对象说明
    “Failed to install the following Android SDK packages as some licences have not been accepted” 错误
    PATH 环境变量重复问题解决
    Ubuntu 18.04 配置java环境
    JDBC的基本使用2
    DCL的基本语法(授权)
    ZJNU 1374
    ZJNU 2184
    ZJNU 1334
  • 原文地址:https://www.cnblogs.com/izhaong/p/12154303.html
Copyright © 2011-2022 走看看