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 / 2let len = img_continer.lengthlet angle = 360 / lenfor (let i = 0; i < len; i++) {// 获取每个元素的角度let t = i * angle// 将角度换成弧度t = t * (Math.PI / 180)const x = Math.sin(t) * rconst y = -Math.cos(t) * rimg_continer[i].style.transform = `translateX(${x}px) translateY(${y}px)`}