CSS：我想用漸變色系統創建加載器

Question

我想用三色創建加載器。 我可以添加頂部和底部顏色。 但是在向右邊框添加線性漸變時遇到問題。

我想創建這樣的東西：

 #grad1{ position: fixed; top: 50%; left: 50%; display: block; z-index: 2150; color: #213848; font-size: 15px; line-height: 100px; text-align: center; border: 6px solid #dbdee0; border-radius: 50%; border-top: 6px solid #00b140; width: 71px; height: 71px; animation: spin 2s linear infinite; border-bottom: 6px solid #128ddd; border-right: 6px solid linear-gradient(#00b140, #128ddd); }

 <!DOCTYPE html> <html> <head> </head> <body> <div id="grad1"></div> </body> </html>

Answer 1

創建漸變邊框的方法有很多，我將向您展示兩種方法：

使用border-image ，但在這種情況下， border-radius將不起作用。

 #grad1{ position: fixed; top: 50%; left: 50%; display: block; z-index: 2150; color: #213848; font-size: 15px; line-height: 100px; text-align: center; border: 6px solid #dbdee0; border-radius: 50%; border-top: 6px solid #00b140; width: 71px; height: 71px; animation: spin 2s linear infinite; border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1; }

 <!DOCTYPE html> <html> <head> </head> <body> <div id="grad1"></div> </body> </html>

使用background-clip設置background-image ，在這里您可以使用border-radius ：

 #grad1{ position: fixed; top: 50%; left: 50%; display: block; z-index: 2150; color: #213848; font-size: 15px; line-height: 100px; text-align: center; border-radius: 50%; width: 71px; height: 71px; animation: spin 2s linear infinite; border: double 0.5em transparent; background-image: linear-gradient(white, white), linear-gradient(to right, red, blue); background-origin: border-box; background-clip: content-box, border-box; }

 <!DOCTYPE html> <html> <head> </head> <body> <div id="grad1"></div> </body> </html>

你也可以用 2 個 div 來做，一個父級有一個正常的漸變背景，一個子級有一個純色，然后給這兩個 div 添加邊框半徑，並為父 div 添加一點填充。

編輯我認為如果不使用 2 個 div，就無法完成您想要的操作，這是我所達到的，但不幸的是我不知道如何制作圓角半徑 :(

 .radialProgressBar { border-radius: 50%; width: 100px; height: 100px; display: block; background: #ddd; margin: 20px; position:relative; background-image: linear-gradient(90deg,#0b99a6 10%,transparent 50%),linear-gradient(-18deg,#00b140 10% ,#e6e6e6 50%); } .radialProgressBar .overlay { border-radius: 50%; width: 80px; height: 80px; background: #fff; position:absolute; top:10%; left:10%; }

 <div class="radialProgressBar"> <div class="overlay"></div> </div>

CSS：我想用漸變色系統創建加載器

問題描述

1 個解決方案

解決方案1
0 2020-03-16 09:55:55

CSS：我想用漸變色系統創建加載器

問題描述

1 個解決方案

解決方案1 0 2020-03-16 09:55:55

解決方案1
0 2020-03-16 09:55:55