css 实现四个角加粗

CSS 实现四角加粗

 <div class="border_style">
              <div class="main">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <div>3
                  <b>台</b>
                </div>
              </div>
            </div>


<style lang="less" scoped>
.border_style {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;margin: 10px;

  .main {
    position: relative;
    width: 400px;
    height: 200px;font-size: 30px;display: flex;flex-direction: column;align-items: center;    justify-content: center;
    border: 1px solid red;

    b{
      display: block;
      }

    span {
      &:nth-child(1) {
        position: absolute;
        left: -5px;
        top: -5px;
        padding: 15px;
        border-style: solid;
        border-color: rebeccapurple;
        border-width: 5px 0 0 5px;
        }

      &:nth-child(2) {
        position: absolute;
        right: -5px;
        top: -5px;
        padding: 15px;
        border-style: solid;
        border-color: rebeccapurple;
        border-width: 5px 5px 0 0;
        }

      &:nth-child(3) {
        position: absolute;
        right: -5px;
        bottom: -5px;
        padding: 15px;
        border-style: solid;
        border-color: rebeccapurple;
        border-width: 0 5px 5px 0;
        }

      &:nth-child(4) {
        position: absolute;
        left: -5px;
        bottom: -5px;
        padding: 15px;
        border-style: solid;
        border-color: rebeccapurple;
        border-width: 0 0 5px 5px;
        }
      }
    }
  }
</style>

右上角标签和精华

<div>
        <img src="https://bdm.gacmotor.com/img/login_bg.a8a22aaa.png" alt="">
        <div class="">
          <div class="note">
            <span class="tag_bg">文字内容  </span>
            <span>售后利润提升优秀案例分享</span>
          </div>
          <div class="tag_tag">
            <a-space>
              <a>终端销量</a>
              <a>1年店龄</a>
            </a-space>
          </div>
        </div>
        <div class="tag_bottom">
          <p>2022/02/08</p>
          <p>
            <a-icon type="eye"/>
            1695
          </p>
          <p>
            <a-icon type="dislike" :rotate="180"/>
            1695
          </p>
          <p>
            <a-icon type="heart"/>
            1695
          </p>
          <p>
            <a-icon type="download"/>
          </p>
        </div>
        <p class="ribbon">
          <a-icon type="star" theme="filled"/>
          <span>精华</span>
        </p>
        <span class="leftLabel">学习中</span>
        <!--            <span class="leftLabel" style="bottom:100%">学习中</span>-->
      </div>

<style lang="less">
.leftLabel {
  display: block;
  position: relative;
  width: 45%;
  height: 2em;
  background-color: #2FB270;
  color: #ffffff;
  font-weight: bold;
  line-height: 28px;
  text-align: center;
  float: left;bottom: 118%;left: -25%;
  transform: translate(25%, 20%) rotate(-45deg);
  box-shadow: 0 0 5px rgba(0, 0, 0, .5), inset 0 0 1px #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);z-index: 1;
  }


.ribbon {
  width: 10px;position: relative;left: 85%;top: -104%;
  height: 50px;
  border-left: 15px solid #F0580D;
  border-right: 15px solid #F0580D;
  border-bottom: 10px solid transparent;border-bottom-right-radius: 4px;border-bottom-left-radius: 4px;

  i {
    position: relative;left: -7px;color: #FFD200;top: 2px;
    }

  span {
    display: block;color: #ffffff;width: 40px;font-size: 12px;position: relative;left: -12px;
    }
  }
</style>