Thuộc tính kiểu đường viền có thể được xác định để vẽ một đường xung quanh đường viền của phần tử, nhưng đường viền không phải là một phần trong 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-style như sau -
Selector {
outline-style: /*value*/
} Ví dụ
Hãy xem một ví dụ về kiểu phác thảo tài sản -
<!DOCTYPE html>
<html>
<head>
<title>CSS outline-style</title>
<style>
span {
margin: 15px;
padding: 20px;
border-style: solid;
border-color: #dc3545;
position: absolute;
outline-width: 5px;
outline-style: double;
outline-color: orange;
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 về thuộc tính kiểu phác thảo -
<!DOCTYPE html>
<html>
<head>
<title>CSS outline-style</title>
<style>
#container {
width:50%;
margin:50px auto;
}
p {
margin:auto;
border-style: ridge;
border-width: 10px;
border-color: lightblue;
outline-style: dashed;
outline-color: violet;
}
</style>
</head>
<body>
<div id="container">
<p>Video Tutorials helps in understanding the technology with live running examples and practical implementation.</p>
</div>
</body></html> Đầu ra
Sau đây là đầu ra cho đoạn mã trên -
