项目中会出现的css样式

1.重复渐变边框

思路： 主要是用重复的背景渐变实现的

如图：

 <div class="card">
      <div class="container">
        全面收集中医癌毒临床医案，建立医案共享机制，构建癌毒病机知识图谱，便于医疗人员检索、分析、学习和交流临床经验
        全面收集中医癌毒临床医案，建立医案共享机制，构建癌毒病机知识图谱，便于医疗人员检索、分析、学习和交流临床经验
        全面收集中医癌毒临床医案，建立医案共享机制，构建癌毒病机知识图谱，便于医疗人员检索、分析、学习和交流临床经验
      </div>
    </div>

 .card {
        width: 300px;
        margin: 100px auto;
        padding: 10px;
        background: repeating-linear-gradient(
            -45deg,
            #f00,
            #f00 10px,
            #fff 10px,
            #fff 20px,
            #75adf8 20px,
            #75adf8 30px,
            #fff 30px,
            #fff 40px
          ) -20px -20px/200% 200%;
        transition: 0.5s;
      }
      .card:hover {
        background-position: 0 0;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
      }
      .container {
        padding: 10px;
        background: #fff;
      }

2. 锥型渐变(conic-gradient)

例如：我们想实现一个扇形效果如图：

 .box {
        width: 200px;
        height: 200px;
        border: 2px solid #fff;
        border-radius: 50%;
        background: conic-gradient(red, red 90deg, green 90deg);
   }

3. 实现元素宽高比为一个固定的值

可以使用aspect-ratio

例如实现一个图片宽高比为16/9

.counter-container {
        width: 100%;
        background: #f00;
        aspect-ratio: 16/9;
}

4. 实现环形旋转效果

主要是用js 计算出每个元素的旋转的角度，根据角度计算出对应的位置x,y坐标，

在结合css的animation动画实现

 <div class="continer">
      <div class="img_continer">
        <div class="img_continer_text">444</div>
      </div>
      <div class="img_continer">
        <div class="img_continer_text">你好啦</div>
      </div>
      <div class="img_continer">
        <div class="img_continer_text">哈哈哈</div>
      </div>
      <div class="img_continer">
        <div class="img_continer_text">啊啊啊</div>
      </div>
    </div>

.continer {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 400px;
        height: 400px;
        margin: 100px auto;
        border: 2px solid #000;
        border-radius: 50%;
        animation: rotate 20s linear infinite;
      }
      .img_continer {
        position: absolute;
        width: 100px;
        height: 100px;
        background: #f00;
      }
      .img_continer_text {
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* reverse反向旋转避免里面的字体倒了 */
        animation: rotate 20s linear infinite reverse;
      }

      @keyframes rotate {
        0% {
          transform: rotate(-360deg);
        }
      }

let continer = document.querySelector('.continer')
      let img_continer = document.querySelectorAll('.img_continer')
      const r = continer.clientWidth / 2
      let len = img_continer.length
      let angle = 360 / len
      for (let i = 0; i < len; i++) {
        // 获取每个元素的角度
        let t = i * angle
        // 将角度换成弧度
        t = t * (Math.PI / 180)
        const x = Math.sin(t) * r
        const y = -Math.cos(t) * r
        img_continer[
          i
        ].style.transform = `translateX(${x}px) translateY(${y}px)`
      }