CSS outline-color用法及代碼示例

CSS的outline-color屬性設置元素的輪廓顏色。

用法

outline-color:<color> | invert | inherit;

屬性值：

<顏色>：它將輪廓顏色設置為任何有效的CSS顏色。

例：outline-color：黑色;

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS outline-color property</title> 
  
    <!-- Internal CSS Style Sheet -->
    <style> 
        h1 { 
            color:green; 
            text-align:center; 
            outline-width:5px; 
            outline-style:dashed; 
            /* CSS property for outline-color */ 
            outline-color:black; 
        } 
    </style> 
  
</head> 
  
<body> 
    <!-- outline-color:black;-->
    <h1>GeeksForGeeks</h1> 
</body> 
  
</html>

輸出：
outline-color-name

例：outline-color：＃FF00FF;

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS outline-color property</title> 
  
    <!-- Internal CSS Style Sheet -->
    <style> 
        h1 { 
            color:green; 
            text-align:center; 
            outline-width:5px; 
            outline-style:dashed; 
            /* CSS property for outline-color */ 
            outline-color:#FF00FF; 
        } 
    </style> 
  
</head> 
  
<body> 
    <!-- outline-color:#FF00FF;-->
    <h1>GeeksForGeeks</h1> 
</body> 
  
</html>

輸出：
outline-color-code

例：outline-color：rgb(0，0，255);

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS outline-color property</title> 
  
    <!-- Internal CSS Style Sheet -->
    <style> 
        h1 { 
            color:green; 
            text-align:center; 
            outline-width:5px; 
            outline-style:dashed; 
            /* CSS property for outline-color */ 
            outline-color:rgb(0, 0, 255); 
        } 
    </style> 
  
</head> 
  
<body> 
    <!-- outline-color:rgb(0, 0, 255);-->
    <h1>GeeksForGeeks</h1> 
</body> 
  
</html>

輸出：
outline-color-rgb

例：outline-color：hsl(0，100％，50％);

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS outline-color property</title> 
  
    <!-- Internal CSS Style Sheet -->
    <style> 
        h1 { 
            color:green; 
            text-align:center; 
            outline-width:5px; 
            outline-style:dashed; 
            /* CSS property for outline-color */ 
            outline-color:hsl(0, 100%, 50%); 
        } 
    </style> 
  
</head> 
  
<body> 
    <!-- outline-color:hsl(0, 100%, 50%);-->
    <h1>GeeksForGeeks</h1> 
</body> 
  
</html>

輸出：
outline-color-hsl

invert:它將輪廓顏色設置為與背景相反的顏色，以確保輪廓始終可見。注意：並非所有瀏覽器都支持。

例：outline-color：反轉;

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS outline-color property</title> 
  
    <!-- Internal CSS Style Sheet -->
    <style> 
        h1 { 
            border:5px solid yellow; 
            text-align:center; 
            outline-width:5px; 
            outline-style:solid; 
            /* CSS property for outline-color */ 
            outline-color:invert; 
        } 
    </style> 
  
</head> 
  
<body> 
    <!-- outline-color:invert;-->
    <h1>GeeksForGeeks</h1> 
</body> 
  
</html>

輸出：
outline-color-invert

Inherit:它根據從其父元素繼承的outline-color屬性設置輪廓顏色。

例：outline-color：繼承；

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS outline-color property</title> 
  
    <!-- Internal CSS Style Sheet -->
    <style> 
        body { 
            outline-color:red; 
        } 
          
        h1 { 
            text-align:center; 
            outline-width:5px; 
            outline-style:solid; 
            /* CSS property for outline-color */ 
            outline-color:inherit; 
        } 
    </style> 
  
</head> 
  
<body> 
    <!-- outline-color:inherit;-->
    <h1>GeeksForGeeks</h1> 
</body> 
  
</html>

輸出：
outline-color-inherit

支持的瀏覽器：以下瀏覽器支持CSS的outline-color屬性：

鍍 chrome 1
邊12
Firefox 1.5
Internet Explorer 8
Opera 7
Safari 1.2

相關用法

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