CSS conic-gradient()用法及代碼示例

conic-gradient()函數是CSS中的內置函數，用於將圓錐漸變設置為背景圖像。圓錐梯度角從0度到360度開始。圓錐形是圓形的，並使用元素的中心作為色標的源點。
圓錐形漸變包括餅圖和色輪。 conic-gradient()函數的結果是數據類型的對象，它是一種特殊的圖像。

用法:

 Background image:conic-gradient(color degree, color degree, ...)

圓錐形漸變與徑向漸變類似，不同之處在於色標位於要創建的圓的外邊。

例：

徑向梯度：

圓錐曲線：

下麵的示例說明了CSS中的conic-gradient()函數：

程序1:

<!DOCTYPE html> 
<html> 
<head> 
    <title>conic gradient</title> 
    <style> 
    .box 
    {     
        background-color:yellow; 
        height:200px; 
        width:200px; 
        float:left; 
        margin:20px; 
        border-radius:50%; 
    } 
    .a 
    { 
        background-image:  
          conic-gradient(red, yellow, green); 
    } 
    </style> 
</head> 
<body> 
    <div class="box a"></div> 
</body> 
</html>

輸出：

output 1 conic-gradient

程序2:

<!DOCTYPE html> 
<html> 
<head> 
    <title>conic gradient</title> 
    <style> 
    .box 
    {     
        background-color:yellow; 
        height:200px; 
        width:200px; 
        float:left; 
        margin:20px; 
        border-radius:50%; 
    } 
    .b 
    { 
        background-image:conic-gradient( 
              from 60deg, red, yellow, green); 
    } 
    </style> 
</head> 
<body> 
    <div class="box b"></div> 
</body> 
</html>

輸出：

程序3:

<!DOCTYPE html> 
<html> 
<head> 
    <title>conic gradient</title> 
    <style> 
    .box 
    {     
        background-color:yellow; 
        height:200px; 
        width:200px; 
        float:left; 
        margin:20px; 
        border-radius:50%; 
    } 
    .c 
    { 
        background-image:  
            conic-gradient(red, yellow, green, red); 
    } 
    </style> 
</head> 
<body> 
    <div class="box c"></div> 
</body> 
</html

輸出：

程序4:

<!DOCTYPE html> 
<html> 
<head> 
    <title>conic gradient</title> 
    <style> 
    .box 
    {     
        background-color:yellow; 
        height:200px; 
        width:200px; 
        float:left; 
        margin:20px; 
        border-radius:50%; 
    } 
    .d 
    { 
        background-image:
 repeating-conic-gradient( 
      red 0deg, red 10deg, yellow 10deg, yellow 20deg);     
    }      
    </style> 
</head> 
<body> 
    <div class="box d"></div> 
</body> 
</html>

輸出：

程序5:

<!DOCTYPE html> 
<html> 
<head> 
    <title>conic gradient</title> 
    <style> 
    .box 
    {     
        background-color:yellow; 
        height:200px; 
        width:200px; 
        float:left; 
        margin:20px; 
        border-radius:50%; 
    } 
    .e 
    { 
        background-image:  
          conic-gradient( 
                        red 0deg, red 90deg, 
                        yellow 90deg, yellow 180deg, 
                        green 180deg, green 270deg, 
                        blue 270deg, blue 360deg); 
    } 
    </style> 
</head> 
<body> 
    <div class="box e"></div> 
</body> 
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自danishmultani2001大神的英文原創作品 CSS | conic-gradient() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。