css outline-style屬性怎麼用
- 青灯夜游原創
- 2019-05-28 10:20:522143瀏覽
輪廓是繪製於元素周圍的一條線，位於邊框邊緣的外圍。 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