Thuộc tính outline-width có thể được xác định để vẽ một đường có độ dày 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 kích thước phần tử, không giống như thuộc tính border.
Cú pháp
Cú pháp của thuộc tính CSS outline-width như sau -
Selector {
outline-width: /*value*/
} LƯU Ý - Thuộc tính kiểu outline cần được xác định trước khi khai báo outline-width.
Hãy xem một ví dụ cho thuộc tính outline-width -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>CSS outline-width</title>
<style>
span {
margin: 15px;
padding: 20px;
border-style: solid;
border-color: limegreen crimson;
position: absolute;
outline-width: 5px;
outline-style: ridge;
outline-color: orange;
border-radius: 50%;
}
#showDiv {
margin:auto;
border-style: solid;
border-color: darkmagenta dodgerblue;
outline-style: dotted;
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 thuộc tính outline-width -
<!DOCTYPE html>
<html>
<head>
<title>CSS outline-width</title>
<style>
#container {
width:50%;
margin:50px auto;
}
p {
margin:auto;
border-style: ridge;
border-width: 15px;
border-color: lightblue;
outline-style: solid;
outline-color: darkviolet;
}
</style>
</head>
<body>
<div id="container">
<p>Learning is fun with examples and live running code.</p>
</div></body></html> Đầu ra
Sau đây là đầu ra cho đoạn mã trên -
