css sprite练习之实现圆角
时间：2010-11-02 来源：六十七度老白干
这里是用到的图片：
啥也不说了，直接贴代码：
<!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>css sprite练习</title>
<style>
.corner/*圆角的公共属性*/ {
background:url(corner.png) no-repeat;
width:7px;
position:absolute;
overflow:hidden;
}
.cornertl {
background-position:0px 0px;/*左上角定位*/
top:0;
left:0;
}
.cornertr {
background-position:-7px 0px;/*右上角定位*/
top:0;
right:0;
}
.cornerbl {
background-position:0px -7px;/*左下角定位*/
bottom:0;
left:0;
}
.cornerbr {
background-position:-7px -7px;/*右下角定位*/
bottom:0;
right:0;
}
</style>
</head>
<body style="background:#D5DFEC;">
<div style="background:#fff; width:500px; position:relative;padding:14px;">
<div class="cornertl corner"></div>
<div class="cornertr corner"></div>
<div class="cornerbl corner"></div>
<div class="cornerbr corner"></div>
<p>testtesttesttesttesttesttesttesttesttesttesttesttesttest</p>
</div>
</body>
</html>
相关阅读 更多 +
