<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#div1{
border-width:5px;
border-color:#0f6;
border-style:groove;
width:50%;
border-radius:10px;
overflow:hidden;
/*width:50%; 를 넘어가는 내용은 가려라*/
-moz-border-radius:25px;/*Firefox 3.6 and earlier*/
}
#span1{
border:5px dashed #CF0;
background-color:#0f6;
width:100px;
height:100px;
display:block;
text-align:justify;
/*왼쪽위, 오른쪽 위, 오른쪽 아래 , 왼쪽 아래*/
border-radius:20px 0 30px 0;
}
#span2{
border:5px dashed #cf0;
background-color:#0f6;
width:100px;
height:100px;
display:block;
text-align:justify;
border-radius:0 30px;
/*border-radius:30px 20px 10px;*/
}
#span3{
border:5px dashed #cf0;
background-color:#0f6;
width:100px;
height:100px;
display:block;
text-align:justify;
border-radius:100px 0 0 100px;
}
#span4{
border:5px dashed #cf0;
background-color:#0f6;
width:100px;
height:50px;
display:block;
text-align:justify;
border-radius:100px 100px 0 0;
}
#span5{
border:5px dashed #cf0;
background-color:#0f6;
width:100px;
height:100px;
display:block;
text-align:justify;
border-radius:100px 100px 100px 100px;
}
#span6{
border-image:url(http://www.w3schools.com/css3/border.png) 30 30 round;
/*stretch round*/
border-width:20px;/*두께가 기본값 1이므로*/
background-color:#9f3;
display:block;
text-align:justify;
border-radius:100px;
}
span{
float:left; margin:20px;
/* X ,Y, 번짐의 정도(기본1 가장진함) 색깔*/
box-shadow: 10px -5px 10px #03f;
}
span div{
position: relative;
top:20px;
}
</style>
</head>
<body>
<div id="div1">---------첫번째 div---------</div>
<span id="span1"> <div>첫번째 span</div> </span>
<span id="span2"> <div>두번째 span</div> </span>
<span id="span3"> <div>세번째 span</div> </span>
<span id="span4"> <div>네번째 span</div> </span>
<span id="span5"> <div>다섯번째 span</div> </span>
<span id="span6"> <div>여섯번째 span</div> </span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
<style>
#div1{ border-width:5px;
border-color:#0F6;
border-style:groove;
width:50%;
border-radius:15px;
overflow:hidden;
/* width:50%; 를 넘어가는 내용은 가려라 */
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
#span1{border:5px dashed #CF0;
background-color:#FF0;
width:100px;
height:100px;
display:block;
text-align:justify;
/* 왼쪽위 , 오른쪽위 , 오른쪽아래, 왼쪽 아래 */
border-radius:20px 0 30px 0;
}
#span2{border:5px dashed #CF0;
background-color:#FF0;
width:100px;
height:100px;
display:block;
text-align:justify;
/* 왼쪽위0 , 오른쪽위30px , 오른쪽아래0, 왼쪽 아래30px */
border-radius:0 30px ;
/*border-radius:30px 20px 10px ;*/
}
#span3{border:5px dotted #CF0;
background-color:#FF0;
width:50px;
height:100px;
display:block;
text-align:justify;
border-radius:100px 0 0 100px ;
}
#span4{border:5px outset #CF0;
background-color:#9F3;
width:100px;
height:50px;
display:block;
text-align:justify;
border-radius:100px 100px 0 0;
}
#span5{border:5px inset #CF0;
background-color:#9F3;
width:100px;
height:100px;
display:block;
text-align:justify;
border-radius:100px;
}
#span6{border-image:url(http://www.w3schools.com/css3/border.png) 30 30 round;
/* stretch round */
border-width:20px; /* 두께가 기본값 1이므로 */
background-color:#9F3;
display:block;
text-align:justify;
border-radius:100px;
}
span{float:left; margin:20px;
/* X, Y, 번짐의 정도(기본1 가장진함) 색깔 */
box-shadow: 10px -5px 10px #03F;
}
span div{ position:relative;
top:20px; left:10px;
}
#img3:hover{
transition:width 2s, transform 2s;
-webkit-transition:all 2s;
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
-moz-transform:rotateX(120deg); /* Firefox */
}
</style>
</head>
<body>
<div id="div1"> ------첫번재 div ----- <br/>
~~~~~~~~~~~~~~~~~~~~~~</div>
<span id="span1"> <div>첫번재 span</div> </span>
<span id="span2"> <div>두번재 span</div> </span>
<span id="span3"> <div>세번재 span</div> </span>
<span id="span4"> <div>네번재 span</div> </span>
<span id="span5"> <div>다섯번재 span</div> </span>
<span id="span6"> <div>여섯번재 span</div> </span>
<img id="img3" src="http://sogangori.cdn2.cafe24.com/sliderImage/wide/14.jpg" />
</body>
</html>
