Thuộc tính viết tắt phác thảo có thể được xác định để vẽ một đường có kiểu dáng, độ dày và màu cụ thể (bắt buộc) 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 đường viền.
Cú pháp
Cú pháp của thuộc tính viết tắt CSS outline như sau -
Selector {
outline: /*value*/
} Ví dụ
Hãy xem một ví dụ về phác thảo tốc ký tài sản -
<!DOCTYPE html>
<html>
<head>
<title>CSS outline Shorthand</title>
<style>
span {
margin: 15px;
padding: 20px;
border-style: solid;
border-color: #f28500 #dc3545;
position: absolute;
outline: 5px double green;
border-radius: 50%;
}
#showDiv {
margin:auto;
border-style: solid;
border-color: darkmagenta dodgerblue;
outline: groove 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ề phác thảo tốc ký tài sản -
<!DOCTYPE html>
<html>
<head>
<title>CSS outline Shorthand</title>
<style>
#container {
width:50%;
margin:50px auto;
}
p {
margin:auto;
border-style: ridge;
border-width: 10px;
border-color: orange;
outline: 5px dashed yellow;
}
</style>
</head>
<body>
<div id="container">
<p>Coding Ground is loved by millions of programmers around the globe.</p>
</div>
</body>
</html> Đầu ra
Sau đây là đầu ra cho đoạn mã trên -
