CSS-轮廓（outline）

来源：互联网发布：温什么知什么的成语编辑：程序博客网时间：2024/05/17 08:18

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，起到突出元素的作用。

轮廓（outline）属性指定了样式，颜色和外边框的宽度。

属性说明值版本outline设置所有的外边框属性outline-color
outline-style
outline-width
inherit2outline-color设置外边框的颜色color-name
hex-number
rgb-number
invert
inherit2outline-style设置外边框的样式none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit2outline-width设置外边框的宽度thin
medium
thick
length
inherit2

1 轮廓样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>轮廓样式</title><style>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">A dotted outline</p><p class="dashed">A dashed outline</p><p class="solid">A solid outline</p><p class="double">A double outline</p><p class="groove">A groove outline</p><p class="ridge">A ridge outline</p><p class="inset">An inset outline</p><p class="outset">An outset outline</p><p><b>注意:</b> 如果只有一个!DOCTYPE则指定IE8支持 outline属性。</p></body></html>

2 轮廓颜色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>轮廓颜色</title><style>p{border:1px solid red;outline-style:dotted;outline-color:#99FF00;}</style></head><body><p>文本</p></body></html>

3 轮廓宽度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>轮廓宽度</title><style>p.one{border:1px solid red;outline-style:solid;outline-width:thin;}p.two{border:1px solid red;outline-style:dotted;outline-width:3px;}</style></head><body><p class="one">文本1</p><p class="two">文本2</p></body></html>

0 0