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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。