了解CSS邊框和輪廓之間的差異
- WBOY轉載
- 2023-09-15 08:25:01716瀏覽
CSS 邊框屬性用於定義元素的邊框屬性。它是邊框寬度、邊框樣式和邊框顏色的簡寫。可以對各個邊的邊框進行樣式設置，也可以指定邊框半徑。
另一方面，CSS 輪廓不佔用空間，並且如果設置，則顯示在邊框周圍。它支援偏移。此外，我們無法指定各個邊是否應該有輪廓。
預設情況下，不會顯示邊框和輪廓。
語法
CSS 邊框和輪廓屬性的語法如下-
Selector {
border: /*value*/
outline: /*value*/
}範例
以下範例說明了CSS 邊框和輪廓屬性-
即時示範
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 15px;
padding: 20px;
width: 35%;
border: thin solid green;
outline-width: 5px;
outline-style: ridge;
outline-color: fuchsia;
border-radius: 50px;
}
</style>
</head>
<body>
<h2>Example</h2>
<div>This is it!</div>
</body>
</html>輸出
這給了以下輸出-
範例
現場示範
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 40px;
padding: 12px;
width: 30%;
border: thick dashed green;
outline: 5px inset;
outline-color: fuchsia;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text surrounded by border and outline.</p>
</body>
</html>輸出
這給了以下輸出-
以上是了解CSS邊框和輪廓之間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除