CSS ??
????? ???? ????? ?? ??? ???? ????. ??? ????? ????? ?????? ?? ??? ??? ??? ????. ?? ?????.
???? ?? ??? ???? ???, ??? ???? ??? ???? ??? ??? ? ????.
??? ???
???? ????? ????? ?? ???? ??? ??????. ????? ???? ??? ????? ?? ???? ????. ????? ??? ??? ?
?: ?? | ?? | ?? ? | ?? |
???: ?? ?? ??: ?? ?? ??: ?? >???? ????, ??? ??? ??? ? ? ??? ???? ??? ?? ????. ?
outline-width
?: ??? | ?? | ??? | <??> ?? ?? ??: ?? ??: ??
[??] ??? ???? ???? ??? ??? ?????. ?? 0
??? ?????? ??? ??? ???? ???? ????? invert ???? ????. ?? ???? ??? ??? ??? ???? ???? ?? ????? ????? ?? ?? ?????. ??? ??? invert ???? IE ??????? ?????. ?? ????? ??? ??? ?? ??? ???
outline-color
?: <color> invert | ??
???: invert(IE), ???(?? ????)
?? ??: ?? ?? ??: ??
?? ???
?? ???? ??? ??? ?? ?? ???? ? ?????. ???? ?? ???? ???? ????? ????? ????, ???? ?? ???? ???? ???? ????? ?????.
[??] IE ?????
outline -offset ?: ?? | ?? ?? ?: 0 ?? ??: ?? ?? ??: ????? ??
??? ???? ??? ???? ??? ??? ???? ??? ???, ??, ??? ? ?? ??? ? ????. ??? ???? ??? ???, ?? ? ??? ???? ?? ??? ???? ?? ??? ?? ??? ??????. ?????? outline-top, outline-right ??? ???? [??] ?????? ????-???? ???? ???, ????-???? ??? ???? ???outline ?: [<outline-style> || <outline-width>] | ?? ??? to : ?? ?? ??: ?? ?:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪廓案例</title>
<style>
p {border:1px solid yellow;}
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">點(diǎn)線輪廓</p>
<p class="dashed">虛線輪廓</p>
<p class="solid">實(shí)線輪廓</p>
<p class="double">雙線輪廓</p>
<p class="groove">凹槽輪廓</p>
<p class="ridge">壟狀輪廓</p>
<p class="inset">嵌入輪廓</p>
<p class="outset">外凸輪廓</p>
</body>
</html>
