본문 바로가기
Coding/HTML & CSS

[HTML & CSS] outline(테두리) 의 종류와 스타일

by 포스트it 2020. 12. 20.
728x90
반응형

-code-

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:green;}

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>

<h2>outline-style</h2>

<p class="dotted">작은 점선</p>
<p class="dashed">큰 점선</p>
<p class="solid">실선</p>
<p class="double">실선 2개</p>
<p class="groove">외각선</p>
<p class="ridge">외각선 밖</p>
<p class="inset">외각선 왼쪽위</p>
<p class="outset">외각선 오른쪽 아래</p>

</body>
</html>

결과물

 

outline-style

작은 점선


큰 점선


실선


실선 2개


외각선


외각선 밖


외각선 왼쪽위


외각선 오른쪽 아래


 

728x90
반응형

댓글