라운드 박스 만들기
Programming/CSS
2008. 7. 31. 13:11
반응형
1. 이미지 없이
http://www.spiffycorners.com/
실행화면:
2. 이미지 적용
http://spiffybox.com/
실행 화면 :
<style type="text/css">
/* set the image to use and establish the lower-right position */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2{ background: transparent url(demobox.png) no-repeat bottom right}
.cssbox{
width:335px !important;/* intended total box width - padding-right(next) */
width: 320px; /* IE Win = width - padding */
padding-right:15px; /* the gap on the right edge of the image (not content padding) */
margin:20px auto/* use to position the box */
}
.cssbox_head{
background-position:top right; /* set the top-right image */
margin-right:-15px; /* pull the right image over on top of border */
padding-right:40px/* right-image-gap + right-inside padding */
}
.cssbox_head h2{
background-position:top left; margin:0; /* set the top-left image */
border:0; /* reset main site styles*/
padding:25px 0 15px 40px; height:auto !important; height:1%/* padding-left = image gap + interior padding ... no padding-right */
}
.cssbox_body{
background-position:bottom left; margin-right:25px; /* set the lower-left corner image */
padding:15px 0 15px 40px/* interior-padding right */
}
</style>
<div class="cssbox">
<div class="cssbox_head">
<h2>This is a header</h2>
</div>
<div class="cssbox_body">
<p>This is for your content.</p>
</div>
</div>
_M#]
직접 해보세용...오오...조쿠나아~~
http://www.spiffycorners.com/
실행화면:
2. 이미지 적용
http://spiffybox.com/
실행 화면 :
<style type="text/css">
/* set the image to use and establish the lower-right position */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2{ background: transparent url(demobox.png) no-repeat bottom right}
.cssbox{
width:335px !important;/* intended total box width - padding-right(next) */
width: 320px; /* IE Win = width - padding */
padding-right:15px; /* the gap on the right edge of the image (not content padding) */
margin:20px auto/* use to position the box */
}
.cssbox_head{
background-position:top right; /* set the top-right image */
margin-right:-15px; /* pull the right image over on top of border */
padding-right:40px/* right-image-gap + right-inside padding */
}
.cssbox_head h2{
background-position:top left; margin:0; /* set the top-left image */
border:0; /* reset main site styles*/
padding:25px 0 15px 40px; height:auto !important; height:1%/* padding-left = image gap + interior padding ... no padding-right */
}
.cssbox_body{
background-position:bottom left; margin-right:25px; /* set the lower-left corner image */
padding:15px 0 15px 40px/* interior-padding right */
}
</style>
<div class="cssbox">
<div class="cssbox_head">
<h2>This is a header</h2>
</div>
<div class="cssbox_body">
<p>This is for your content.</p>
</div>
</div>
_M#]
직접 해보세용...오오...조쿠나아~~
반응형