首頁 > web前端 > css教學 > 了解CSS邊框和輪廓之間的差異

了解CSS邊框和輪廓之間的差異

WBOY
發布: 2023-09-15 08:25:01
轉載
721 人瀏覽過

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>
登入後複製

輸出

這給了以下輸出-

了解CSS邊框和輪廓之間的差異

範例

 現場示範

<!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邊框和輪廓之間的差異

#

以上是了解CSS邊框和輪廓之間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板