首页 > 代码库 > CSS sprite 圆角——源代码
CSS sprite 圆角——源代码
所需图片：
corners-type1 corners-type2 corners-type3 corners-type4 corners-type5 roundedbox-type5-bg
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Previe of Type 4 - Easy rounded corners, by Ignacio Ricci (www.ignacioricci.com)</title><style>body {margin:0; padding:40px; font:76% Georgia, "Times New Roman", Times, serif; background:#FFF;}/* Rounded-cornered divs -*/.roundedBox {position:relative; padding:17px; margin:10px 0;}/*- All the corners -*/.corner {position:absolute; width:17px; height:17px;}/*- Each corner -*/.topLeft {top:0; left:0; background-position:-1px -1px;}.topRight {top:0; right:0; background-position:-19px -1px;}.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}.bottomRight {bottom:0; right:0; background-position:-19px -19px;}/*- Type1 - Blue -*/ #type1 {background-color:#CCDEDE;}#type1 .corner {background-image:url(img/corners-type1.gif);}/*- Type2 - Green -*/#type2 {background-color:#CDDFCA;}#type2 .corner {background-image:url(img/corners-type2.gif);}/*- Type3 - Violet -*/#type3 {background-color:#D3CADF;}#type3 .corner {background-image:url(img/corners-type3.gif);}/*- Type4 - Red with border -*//* We change the corners‘ position and add the border */#type4 {background-color:#CCACAE; border:1px solid #AD9396;}#type4 .corner {background-image:url(img/corners-type4.gif);}#type4 .topLeft {top:-1px; left:-1px;}#type4 .topRight {top:-1px; right:-1px;}#type4 .bottomLeft {bottom:-1px; left:-1px;}#type4 .bottomRight {bottom:-1px; right:-1px;}/*- Type5 - With gradient -*//* We change the top corners‘ height, and the bottom corners background-position. We must also add to the containing div a gradient to repeat in x. */#type5 {background:#FECBCA url(img/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}#type5 .corner {background-image:url(img/corners-type5.png);}#type5 .topLeft,#type5 .topRight {height:140px;}#type5 .bottomLeft {background-position:-1px -142px;}#type5 .bottomRight {background-position:-19px -142px;} </style></head><body> <!-- Type1: Blue --> <div class="roundedBox" id="type1"> <strong>My content in roundedBox Type 1</strong> <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div> </div> <!-- Type2: Green --> <div class="roundedBox" id="type2"> <strong>My content in roundedBox Type 2</strong> <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div> </div> <!-- Type3: Violet --> <div class="roundedBox" id="type3"> <strong>My content in roundedBox Type 3</strong> <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div> </div> <!-- Type4: Red with border --> <div class="roundedBox" id="type4"> <strong>My content in roundedBox Type 4</strong> <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div> </div> <!-- Type5: With gradient --> <div class="roundedBox" id="type5"> <strong>My content in roundedBox Type 5</strong> <div class="corner topLeft"></div><div class="corner topRight"></div><div class="corner bottomLeft"></div><div class="corner bottomRight"></div> </div></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。