728x90
반응형
SMALL
안녕하세요.
#yeoneeblog 여니입니다 :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테두리관련스타일</title>
<style>
div{
width:100px;
height: 100px;
border-width: 3px;
margin:15px;
}
#test1{
border-style:dotted;
border-top-width: 10px;
}
#test2{
box-shadow: 5px 5px 10px 5px gray;
}
#test3{
border-style:dashed;
border-left-color: red;
}
#test4{
border-width:5px;
border-style: dashed double solid dotted;
}
#test5{
border-style:groove;
border-width: 10px;
border-top-left-radius: 50px;
/* 테두리 모서리를 둥구스름하게 표현*/
}
#test6{
border-style:ridge;
border-width: 10px;
border-bottom-right-radius:80px;
}
#test7{
border-style:inset;
border-width: 5px;
border-top-left-radius: 60px;
border-bottom-right-radius: 60px;
background-color: yellow;
}
#test8{
border-style:outset;
}
#test9{
border-style:solid;
border-radius: 50px;
}
#test10{
border : 10px dashed pink;
}
#btn{
border: 2px dashed pink;/* 버튼 테두리 설정*/
padding: 10px 20px;/* 버튼도 여백주기가능 */
border-radius: 10px;
}
#btn:hover{/* 반응선택자*/
cursor: pointer;
background-color: gray;
}
</style>
</head>
<body>
<h1>테두리 관련 스타일(border~)</h1>
<pre>
선택자{
* 테두리 스타일
border-위치-style: none/dotted/dashed/solid/double/groove/ridge/inset/outset;
* 테두리 두께
border-위치-width : 테두리두께;
* 테두리 색상
border-위치-color : 테두리색상;
* 박스에 그림자 효과
box-shadow : 가로(x) 세로(y) 흐림정도 번짐정도 색상;
}
</pre>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5"></div>
<div id="test6"></div>
<div id="test7"></div>
<div id="test8"></div>
<div id="test9"></div>
<div id="test10"></div>
<button id="btn">로그인</button>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br>
</body>
</html>
728x90
반응형
LIST
'VsCode(HTML)' 카테고리의 다른 글
| 레이아웃스타일 HTML (1) | 2023.05.14 |
|---|---|
| 배경관련스타일 HTML (0) | 2023.05.13 |
| 영역관련스타일 HTML (0) | 2023.05.12 |
| 목록관련스타일 HTML (0) | 2023.05.12 |
| 텍스트관련스타일 HTML (0) | 2023.05.12 |
