資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學CSS中的輪廓與邊框
輪廓不佔用空間，如果設定了輪廓，它會顯示在邊框周圍。它用於突出顯示元素，我們無法指定各個邊是否應該有輪廓。與邊框一樣，輪廓預設不顯示。在某些瀏覽器（例如 Firefox）中，獲得焦點的元素會顯示細輪廓。
邊框可以進行更廣泛的自定義。我們可以為邊框的各個邊設定樣式並圓角。邊框佔用空間並影響盒模型。
輪廓
輪廓繪製在邊框之外。它是圍繞元素繪製的一條線。以下是屬性。我們可以使用單個簡寫屬性設定所有這些屬性：
outline-style: outline-color: outline-width: outline-offset:
語法
CSS 輪廓屬性的語法如下：
Selector {
outline: /*value*/
}
示例
讓我們來看一個例子。您可以清楚地看到輪廓甚至在邊框之外：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
outline: yellow solid 5px;
}
p {
outline: blue dashed 10px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is a demo text</p>
</body>
</html>
邊框
邊框使用 border 屬性設定。以下是屬性。我們可以使用單個簡寫屬性設定所有這些屬性：
border-style
border-width
border-color
注意 - border-style 是必需的，否則邊框將不可見。
語法
CSS border 屬性的語法如下：
Selector {
border: /*value*/
}
示例
讓我們來看一個例子：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 2px dashed yellow;
}
p {
border: 3px dotted orange;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is a demo text</p>
</body>
</html>
示例
以下示例說明了 CSS 輪廓和邊框屬性：
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: flex;
float: left;
margin: 20px;
padding: 12px;
width: 30%;
outline: thin dotted;
background-color: lavender;
}
p + p {
width: 250px;
outline: none;
border: outset;
}
</style>
</head>
<body>
<h2>Learning is fun</h2>
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995.</p>
<p>Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. Java is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Software Development Domain</p>
</body>
</html>
示例
讓我們再來看一個例子：
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: auto;
width: 70%;
outline: thick double;
background-color: lightgoldenrodyellow;
}
h3 {
border: inset;
}
</style>
</head>
<body>
<h3>Kotlin Tutorial</h3>
<article>Kotlin is a programming language introduced by JetBrains, the official designer of the most intelligent Java IDE, named Intellij IDEA. This is a strongly statically typed language that runs on JVM. In 2017, Google announced Kotlin is an official language for android development. Kotlin is an open source programming language that combines object-oriented programming and functional features into a unique platform.</article>
</body>
</html>
更新於：2023年12月26日
662 次瀏覽
廣告