Thuộc tính màu đường viền có thể được xác định để vẽ một đường có màu cụ thể xung quanh đường viền của phần tử, nhưng đường viền không phải là một phần của các kích thước của phần tử, không giống như thuộc tính đường viền.
Cú pháp
Cú pháp của thuộc tính CSS outline-color như sau -
Selector {
outline-color: /*value*/
} LƯU Ý - Thuộc tính kiểu đường viền cần được xác định trước khi khai báo màu đường viền.
Ví dụ
Hãy xem một ví dụ về màu viền tài sản -
<!DOCTYPE html>
<html>
<head>
<title>CSS outline-color</title>
<style>
span {
margin: 15px;
padding: 20px;
border-style: solid;
border-color: #f28500 #dc3545;
position: absolute;
outline-width: 5px;
outline-style: double;
outline-color: green;
border-radius: 50%;
}
#showDiv {
margin:auto;
border-style: solid;
border-color: darkmagenta dodgerblue;
outline-style: groove;
outline-color: black;
height: 80px;
width: 80px;
}
#container {
width:50%;
margin:50px auto;
}
</style>
</head>
<body>
<div id="container">
<div id="showDiv"><span></span></div>
</div></body></html> Đầu ra
Sau đây là đầu ra cho đoạn mã trên -
Ví dụ
Hãy xem một ví dụ khác cho kiểu phác thảo tài sản -
<!DOCTYPE html>
<html>
<head>
<title>CSS outline-color</title>
<style>
#container {
width:50%;
margin:50px auto;
}
p {
margin:auto;
border-style: ridge;
border-width: 10px;
border-color: lightblue;
outline-style: dashed;
outline-width: 5px;
outline-color: violet;
}
</style>
</head>
<body>
<div id="container">
<p>Reach millions of professionals with video tutorials.</p>
</div>
</body>
</html> Đầu ra
Sau đây là đầu ra cho đoạn mã trên -
