CSS 日常难点样式操作

flex流水布局

https://blog.csdn.net/wojiaomaxiaoqi/article/details/79754485

<div class="masonry">
    <div class="column">
        <div class="item">
        <div class="item__content">
        </div>
        </div>
        <!-- more items -->
    </div>
    <div class="column">
        <div class="item">
        <div class="item__content">
        </div>
        </div>
        <!-- more items -->
    </div>
    <div class="column">
        <div class="item">
        <div class="item__content">
        </div>
        </div>
        <!-- more items -->
    </div>
</div>

.masonry {
    display: flex;
    flex-direction: row;
}
 
.column {
    display: flex;
    flex-direction: column;
    width: calc(100%/3);
}

上下左右居中

.cover{
	width: 100%; height: 100%;
}
.wrap{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

先上下居中后左右居中

align-items: center;
justify-content: center;

<div class="num-item middle" style="flex: 1;">
     <div class="city">
         全市
     </div>
 </div>

.middle {
                    display: flex;// 先上下居中
                    align-items: center;// 先上下居中
                    width: 100%;
                    text-align: center;
 }
.city {
       width: 100%;
       font-size: $font-unit*12;
      font-weight: bold;
      color: #00fffb;
      text-align: center;//后左右居中
} 

自适应正方形

	width: 100%;
    height: 0;
    padding-bottom: 100%;
    
	position: absolute;
    top: 50%;
    left: 50%;
    background-image: linear-gradient(to top, #1dbee6, #00ff90);
    border-radius: 50%; // 圆
    transform: translate(-50%, -50%);

自适应圆环

<div ref="circle" class="circle" :style="chartStyle">
        <div class="ring" />
    </div>

.circle {
    position: relative;
    display: inline-block;

    .ring {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        background-image: linear-gradient(to top, #1dbee6, #00ff90);
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .ring::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 75%;
        height: 0;
        padding-bottom: 75%;
        content: ' ';
        background-color: rgba(0, 9, 141, 1);
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }
}

标题svg格式更改颜色

.father{
overflow:hidden;
.icon {
filter: drop-shadow(#0ff 80px 0);
transform: translateX(-80px);
}
}