CSS stroke-color屬性用法及代碼示例

CSS stroke-color屬性設置邊框的筆觸顏色。

注意：由於沒有瀏覽器支持stroke-color屬性，因此我們將筆觸用作速記屬性，以定義筆觸的顏色。

用法:

stroke-color:currentColor 
/* Or */
stroke-color:color-name 
/* Or */
stroke-color:rgb value 
/* Or */
stroke-color:hexadecimal value

屬性值：該屬性接受上麵提到的和下麵描述的屬性值：

currentColor：此屬性值所指的筆觸顏色與文本顏色相同。
color-name：此屬性值引用顏色的名稱，例如：紅色，綠色，藍色等。
rgb_value：此屬性值是指顏色的rgb值，例如：rgb(255，0，0)，rgb(255，350，1)等。
hexadecimal-value：此屬性值是指顏色的十六進製值，例如：＃fff，＃000等。

範例1：下麵的示例演示了如何使用currentColor屬性值來使用stroke-color屬性

<!DOCTYPE html> 
<html> 
  
    <head> 
        <style> 
  
            .geek{ 
                fill:lightgreen; 
                stroke-width:10px;  
                stroke:currentcolor; 
            } 
  
        </style> 
    </head> 
  
    <body> 
        <h1 style="color:green; text-align:center;"> 
            GeeksforGeeks 
        </h1> 
  
        <svg viewBox="0 0 1200 400"> 
        <circle cx="600" cy="100" r="80" 
                class="geek"> 
        </circle> 
        </svg> 
  
    </body> 
  
</html>

輸出：

範例2：下麵的示例演示了如何使用color-name屬性值使用stroke-color屬性

<!DOCTYPE html> 
<html> 
  
    <head> 
        <style> 
  
            .geek{ 
                fill:green; 
                stroke-width:10px;  
                stroke:red; 
            } 
  
        </style> 
    </head> 
  
    <body> 
        <h1 style="color:green; text-align:center;"> 
            GeeksforGeeks 
        </h1> 
  
        <svg viewBox="0 0 1200 400"> 
        <circle cx="600" cy="100" r="80" 
                class="geek"> 
        </circle> 
        </svg> 
  
    </body> 
  
</html>

輸出：

支持的瀏覽器：

Chrome(不支持)
Safari(不支持)
Firefox(不支持)
Opera(不支持)
邊(不支持)
Internet Explorer(不支持)

相關用法

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