輪廓是繪製於元素周圍的一條線，位於邊框邊緣的外圍。 outline-style屬性用於設定元素的整個輪廓的樣式；不能設定該屬性的值為none，否則輪廓不會出現。
css outline-style屬性怎麼用？
outline-style屬性用來設定元素的整個輪廓的樣式。樣式不能是 none，否則輪廓不會出現。
語法：
outline-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit;
屬性值：
##● none：預設。定義無輪廓。 ● dotted：定義點狀的輪廓。 ● dashed：定義虛線輪廓。 ● solid：定義實線輪廓。 ● double：定義雙線輪廓。雙線的寬度等同於 outline-width 的值。 ● groove：定義 3D 凹槽輪廓。此效果取決於 outline-color 值。 ● ridge：定義 3D 凸槽輪廓。此效果取決於 outline-color 值。 ● inset：定義 3D 凹邊輪廓。此效果取決於 outline-color 值。 ● outset：定義 3D 凸邊輪廓。此效果取決於 outline-color 值。 ● inherit：規定應該從父元素繼承輪廓樣式的設定。說明：outline-style 屬性需要始終在 outline-color 屬性之前宣告 ，因為元素只有獲得輪廓以後才能改變其輪廓的顏色。
註解：
outline是圍繞元素，它是圍繞元素的邊距；但是，它是來自不同的邊框屬性。 輪廓不是元素尺寸的一部分，因此元素的寬度和高度屬性不包含輪廓的寬度。輪廓線不會佔據空間，也不一定是長方形。css outline-style屬性 範例
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p {
border: 1px solid red;
}
p.dotted {
outline-style: dotted;
}
p.dashed {
outline-style: dashed;
}
p.solid {
outline-style: solid;
}
p.double {
outline-style: double;
}
p.groove {
outline-style: groove;
}
p.ridge {
outline-style: ridge;
}
p.inset {
outline-style: inset;
}
p.outset {
outline-style: outset;
}
</style>
</head>
<body>
<p class="dotted">点线轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓</p>
<p class="ridge">垄状轮廓</p>
<p class="inset">嵌入轮廓</p>
<p class="outset">外凸轮廓</p>
<p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>
</body>
</html>效果圖：
以上是css outline-style屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
如何使用HTML，CSS和JavaScript創建動畫倒計時計時器Apr 11, 2025 am 11:29 AM您是否曾經在項目上需要一個倒計時計時器？對於這樣的東西，可以自然訪問插件，但實際上更多
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌
熱工具
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
禪工作室 13.0.1
強大的PHP整合開發環境
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
