生活随笔
收集整理的這篇文章主要介紹了
7、CSS 轮廓
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。
所有CSS 輪廓（outline）屬性
輪廓（Outline） 實例：
在元素周圍畫線
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html> < head> < styletype = " text/css" >
p
{
border : red solid thin;
outline : #00ff00 dotted thick;
}
</ style> </ head> < body> < p> < b> 注釋：
</ b> 只有在規定了 !DOCTYPE 時，Internet Explorer 8 （以及更高版本） 才支持 outline 屬性。
</ p> </ body> </ html> 設置輪廓的顏色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html> < head> < styletype = " text/css" >
p
{
border : red solid thin;
outline-style : dotted;
outline-color : #00ff00;
}
</ style> </ head> < body> < p> < b> 注釋：
</ b> 只有在規定了 !DOCTYPE 時，Internet Explorer 8 （以及更高版本） 才支持 outline-color 屬性。
</ p> </ body> </ html> 設置輪廓的樣式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html> < head> < styletype = " text/css" >
p
{
border : red solid thin;
}
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> < pclass = " dotted" > A dotted outline
</ p> < pclass = " dashed" > A dashed outline
</ p> < pclass = " solid" > A solid outline
</ p> < pclass = " double" > A double outline
</ p> < pclass = " groove" > A groove outline
</ p> < pclass = " ridge" > A ridge outline
</ p> < pclass = " inset" > An inset outline
</ p> < pclass = " outset" > An outset outline
</ p> < p> < b> 注釋：
</ b> 只有在規定了 !DOCTYPE 時，Internet Explorer 8 （以及更高版本） 才支持 outline-style 屬性。
</ p> </ body> </ html> 設置輪廓的寬度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html> < head> < styletype = " text/css" >
p.one
{
border : red solid thin;
outline-style : solid;
outline-width : thin;
}
p.two
{
border : red solid thin;
outline-style : dotted;
outline-width : 3px;
}
</ style> </ head> < body>
?
< pclass = " one" > This is some text in a paragraph.
</ p> < pclass = " two" > This is some text in a paragraph.
</ p>
?
< p> < b> 注釋：
</ b> 只有在規定了 !DOCTYPE 時，Internet Explorer 8 （以及更高版本） 才支持 outline-width 屬性。
</ p> </ body> </ html>
?
總結
以上是生活随笔 為你收集整理的7、CSS 轮廓 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
