首页 > 其他 > 详细

仿百度自适应宽度的圆角

时间:2014-04-12 18:12:00      阅读:461      评论:0      收藏:0      [点我收藏+]

<!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">
<title>仿百度宽度自适应的圆角</title>
<head>
<style type="text/css">
.conternt{
position:relative;
width:300px;
height:200px;
background:#DBEDF5;
border:#9BC9DF 1px solid;
}
.conternt p{margin:10px}
.lt,.ld,.rt,.rd{
position:absolute;
width:3px;
height:3px;
overflow:hidden;
}
.lt{
left:-1px;
top:-1px;
background: url(/jscss/demoimg/200906/3x7.gif) 0 0 no-repeat;
}
.ld{
left:-1px;
bottom:-1px;
background:url(/jscss/demoimg/200906/3x7.gif) 0 -7px no-repeat;
}
.rt{
right:-1px;
top:-1px;
background:url(/jscss/demoimg/200906/3x7.gif) -11px 0 no-repeat;
}
.rd{
right:-1px;
bottom:-1px;
background:url(/jscss/demoimg/200906/3x7.gif) -11px -7px no-repeat;
}
</style>
</head>
<body>
<div class="conternt">
<div class="lt"></div>
<div class="ld"></div>
<p>宽度和高度都可以自适应,你可以把这里的文字加多一点</p>
<div class="rt"></div>
<div class="rd"></div>
</div>
</body>
</html>

仿百度自适应宽度的圆角,布布扣,bubuko.com

仿百度自适应宽度的圆角

原文:http://www.cnblogs.com/hgj123/p/3658244.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!