<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
margin : 20px;
padding : 20px;
border : 1px solid blue;
width : 50%;
}
#d1{
border-color : red;
background-color : coral;
box-shadow: 30px 10px 25px yellow; /* horizontal, vertical, blur(숫자 높을수록 더 흐려짐), color */
}
#d2{
border-style : dotted;
}
#d3{
border-width : 5px;
border-style : double solid;
}
#d4{
border-width : 3px 10px;
border-style : dotted solid double dashed;
}
#d5{
border-color : red green;
}
#d6{
border-width : 10px;
border-color : red;
border-style : inset;
}
#d7{
border-width : 10px;
border-color : red;
border-style : outset;
}
#d8{
border-width : 20px;
border-color : red;
border-style : groove;
}
#d9{
border-width : 20px;
border-color : red;
border-style : ridge;
}
#d10{
border-width : 1px thin 5px thick;
border-color : green;
border-style : solid;
}
#d11{
border-width : 10px 5px medium thick;
display : none;
}
#d12{
visibility : hidden; /* 숨겨지지만 공간차지 */
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
<div id="d9">d9</div>
<div id="d10">d10</div>
<div id="d11">d11</div>
<div id="d12">d12</div>
</body>
</html>😀 참고자료
😀 실행
'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글
| [html/jsp] wordwrapping (0) | 2022.12.27 |
|---|---|
| [html/jsp] table스타일 (0) | 2022.12.27 |
| [html/jsp] text스타일 (0) | 2022.12.27 |
| [html/jsp] 리스트스타일 (0) | 2022.12.27 |
| [html/jsp] 백그라운드이미지 (0) | 2022.12.27 |