Programming/CSS

라운드 박스 만들기

Edward. K 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#]
직접 해보세용...오오...조쿠나아~~



반응형