반응형
.list_content_set{position:relative;background-color:#fff;padding:10px 5px;}
.round1_1{position:absolute;top:0;left:0;width:13px;height:13px;background:url(../image/bg_round1.gif) no-repeat 0 0; font-size:0;}
.round1_2{position:absolute;top:0;right:0;width:13px;height:13px;background:url(../image/bg_round1.gif) no-repeat 100% 0; font-size:0;}
.round1_3{position:absolute;left:0;bottom:0;width:13px;height:13px;background:url(../image/bg_round1.gif) no-repeat 0 100%; font-size:0;}
.round1_4{position:absolute;right:0;bottom:0;width:13px;height:13px;background:url(../image/bg_round1.gif) no-repeat 100% 100%; font-size:0;}
.round1_top{position:absolute;top:0;left:0;height:13px;width:100%;background:url(../image/bg_round2.gif) repeat-x; font-size:0;border:0 red solid;}
.round1_right{position:absolute;top:0;right:0;width:13px;height:100%;background:url(../image/bg_round3.gif) repeat-y; font-size:0;border:0 red solid;}
.round1_bottom{position:absolute;left:0;bottom:0;height:13px;width:100%;background:url(../image/bg_round4.gif) repeat-x; font-size:0;border:0 red solid;}
.round1_left{position:absolute;top:0;left:0;width:13px;height:100%;background:url(../image/bg_round5.gif) repeat-y; font-size:0;border:0 red solid;}
<div class="list_content_set"><div class="round1_top"></div>
<div class="round1_right"></div>
<div class="round1_bottom"></div>
<div class="round1_left"></div>
<div class="round1_1"></div>
<div class="round1_2"></div>
<div class="round1_3"></div>
<div class="round1_4"></div>
</div>
</div>
http://www.ignacioricci.com/tutorials/rounded%20corners/previews/preview-type4.html
http://cssglobe.com/post/3714/css-sprites-rounded-corners
반응형
'CSS HTML5 > 퍼블리싱 팁' 카테고리의 다른 글
selcet처럼 css 디자인입히기 (0) | 2016.11.09 |
---|---|
버튼 스타일시트 (0) | 2016.11.09 |
제목이 길 경우 점선으로 나오게 하는... (0) | 2016.11.09 |
css 세로 중앙 정렬 할때 (0) | 2016.11.09 |
푸터가 항상 하단에 있게 할때 (0) | 2016.11.09 |