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