8. border 처리
페이지 정보
작성자 관리자 댓글 0건 조회 534회 작성일 22-01-06 22:32본문
8. border 처리
실습 : border.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Border 처리</title>
</head>
<body>
<header>
<h1>스타일시트 연습</h1>
</header>
<div>
<p>border 처리</p>
</div>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
</body>
</html>
스타일을 추가한다.
<style type="text/css">
div {
border:1px solid red;
width:400px;
height:300px;
border-radius:20px;
}
</style>
스타일을 수정한다.
<style type="text/css">
div {
border:1px solid red;
width:400px;
height:50px;
border-radius:20px;
}
.p1 {
border:1px solid red;
width:200px;
height:100px;
border-top-left-radius:100px 50px;
background-color:lightyellow;
}
.p2 {
border:1px solid red;
width:200px;
height:100px;
border-bottom-right-radius:50% 30%;
background-color:lightyellow;
}
.p3 {
border:1px solid red;
width:200px;
height:100px;
border-top-right-radius:30px;
background-color:lightyellow;
}
</style>
실습2 : border2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Border 처리</title>
</head>
<body>
<header>
<h1>스타일시트 연습</h1>
</header>
<div class="sh1"></div>
<div class="sh2"></div>
</body>
</html>
스타일을 추가한다.
<style>
.sh1{
width:300px;
height:100px;
border-radius:50px;
box-shadow:10px 10px 20px 5px #666;
}
.sh2{
margin-top:50px;
background-color:#008;
width:300px;
height:100px;
border-radius:50px;
box-shadow:-10px 10px 20px -1px #fff inset;
visibility:visible;
}
</style>
댓글목록
등록된 댓글이 없습니다.