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)`}