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