웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
border 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>테두리 디자인</title>
<style type="text/css">
body {
background-color: #313131;
}
.box {
width: 200px;
height: 200px;
float: left;
margin: 5px;
/* 일괄적용 */
border: transparent 10px solid;
/* 부분(방향별) 적용
border-top: darkred 6px outset;
border-right: darkred 6px outset;
border-bottom: darkred 6px outset;
border-left: darkred 6px outset;
*/
/* 보더의 컬러 값의 기본은 글씨 색을 따라갑니다. */
/*
부분(속성별) 적용
border-top-color: darkred;
border-top-width: 6px;
border-top-style: outset;
border-right-color: darkred;
border-right-width: 6px;
border-right-style: outset;
border-bottom-color: darkred;
border-bottom-width: 6px;
border-bottom-style: outset;
border-left-color: darkred;
border-left-width: 6px;
border-left-style: outset;
*/
background-color: yellow;
text-align: center;
line-height: 200px;
}
.box:hover {
border: white 10px solid;
}
</style>
</head>
<body>
<div class="box">
테두리 디자인
</div>
<div class="box">
테두리 디자인
</div>
<div class="box">
테두리 디자인
</div>
<div class="box">
테두리 디자인
</div>
<div class="box">
테두리 디자인
</div>
<div class="box">
테두리 디자인
</div>
<div class="box">
테두리 디자인
</div>
</body>
</html>
'css' 카테고리의 다른 글
| media type (0) | 2011.11.11 |
|---|---|
| line-height (0) | 2011.11.11 |
| background (0) | 2011.11.11 |
| min-width 최소 가로폭 설정 (0) | 2011.11.11 |
| margin 외부여백 (0) | 2011.11.11 |