資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學CSS 輪廓速記屬性
輪廓速記屬性可以定義在元素邊框周圍繪製特定樣式（必需）、粗細和顏色的線，但與邊框屬性不同，輪廓不屬於元素的尺寸。
語法
CSS 輪廓速記屬性的語法如下：
Selector {
outline: /*value*/
}
以上值可以是：
outline-width (輪廓寬度)
outline-style (輪廓樣式)
outline-color (輪廓顏色)
帶有樣式和顏色的輪廓屬性
讓我們來看一個輪廓速記屬性的示例。我們設定了帶有顏色的輪廓樣式：
outline: groove black;
示例
這是一個示例：
<!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>
包含所有值的輪廓屬性
讓我們來看另一個輪廓速記屬性的示例。在這個示例中，我們在一行中包含所有輪廓屬性：
outline: 5px dashed yellow;
示例
這是一個示例：
<!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>
輪廓寬度
輪廓寬度的值可以是：
thin (細)
thick (粗)
medium (中等)
長度單位
示例
讓我們來看一個示例。在這裡，我們使用速記屬性設定了細和粗的輪廓：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
outline: thin dashed green;
}
h2 {
outline: thick dashed green;
}
</style>
</head>
<body>
<h1>Demo Heading1</h1>
<h2>Demo Heading2</h2>
<p>Demo Text</p>
</body>
</html>
輪廓樣式
輪廓速記屬性中的輪廓樣式可以具有以下任何值：
dotted - 設定點狀邊框
dashed - 設定虛線邊框
solid - 設定實線邊框
double - 設定雙線邊框
groove - 設定 3D 凹槽邊框
ridge - 設定 3D 凸起邊框
inset - 設定 3D 內嵌邊框
示例
讓我們來看一個示例。在這裡，我們使用速記屬性設定了點狀和虛線輪廓：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
outline: dotted green;
}
h2 {
outline: dashed green;
}
</style>
</head>
<body>
<h1>Demo Heading1</h1>
<h2>Demo Heading2</h2>
<p>Demo Text</p>
</body>
</html>
更新於：2023-12-29
426 次瀏覽
廣告