14. 외곽선(테두리)
.NET프로그래밍/CSS 2.0 2009. 7. 28. 11:59 |<!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>
<title>외곽선(테두리)</title>
<style type="text/css">
.myButton
{
width:100px; height:50px;
background-color:White;
border-left-width:1px; border-left-style:solid; border-left-color:Red;
border-top-width:2px; border-top-style:dotted; border-top-color:Green;
border-right-width:3px; border-right-style:groove; border-right-color:Blue;
border-bottom-width:4px; border-bottom-style:dashed; border-bottom-color:Yellow;
} /* 상우하좌에 굵기/선종류/색깔 따로 적용. */
.myBtn2
{
border-width:1px; border-style:dotted; border-color:Red;
} /* 방향속성만 뺐음. 모든방향 테두리에 굵기/선종류/색깔 같음. */
.myBtn3
{
border: groove 1px blue;
} /* 속성명 안쓰고 간단히 border(테두리)속성 기술. */
</style>
</head>
<body>
<input type="button" value="외곽선 정의" class="myButton" />
<input type="button" value="외곽선 정의2" class="myBtn2" />
<input type="button" value="외곽선 정의3" class="myBtn3" />
</body>
</html>
<!--
- border-방향-width ==> border-width : 테두리굵기
- border-방향-style ==> border-style : 테두리선의 종류
- solid(실선) / dotted(점선) / groove(음영효과 있는 선) / dashed(하이픈과 비슷한 선, [다(대)시])
- border-방향-color ==> border-color : 테두리선 색깔
- 외곽선(테두리) 스타일은 버튼, 테이블, div 영역 등에 적용 가능하다.
-->
< 실행결과 >
'.NET프로그래밍 > CSS 2.0' 카테고리의 다른 글
| 16. 커서관련스타일 (0) | 2009.07.28 |
|---|---|
| 15. 배경관련스타일 (0) | 2009.07.28 |
| 13. 여백관련스타일 (0) | 2009.07.28 |
| 12. 텍스트관련스타일 (0) | 2009.07.28 |
| 11. 정렬관련스타일 (0) | 2009.07.28 |