코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS Outline</title> <style> p { border: 1px solid black; outline-color: 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;} p.none {outline-style: none;} p.hidden {outline-style: hidden;} </style> </head> <body> <h1>outline-style 속성을 이용한 외곽선의 모양 변경</h1> <p class="dotted">outline-style 속성값을 dotted로 한 단락입니다.</p> <p class="dashed">outline-style 속성값을 dashed로 한 단락입니다.</p> <p class="solid">outline-style 속성값을 solid로 한 단락입니다.</p> <p class="double">outline-style 속성값을 double로 한 단락입니다.</p> <p class="groove">outline-style 속성값을 groove로 한 단락입니다.</p> <p class="ridge">outline-style 속성값을 ridge로 한 단락입니다.</p> <p class="inset">outline-style 속성값을 inset으로 한 단락입니다.</p> <p class="outset">outline-style 속성값을 outset으로 한 단락입니다.</p> <p class="none">outline-style 속성값을 none으로 한 단락입니다.</p> <p class="hidden">outline-style 속성값을 hidden으로 한 단락입니다.</p> </body> </html>
