“四图像滑动门”单色不固定宽度圆角框

效果图：

具体实现的代码：

<!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=gb2312" />
<title>“四图像滑动门”单色不固定宽度圆角框</title>
<style type="text/css">
#rounded{
margin:0;
padding:0;
width:600px;
background:#ccc url(zs.gif) no-repeat ;

}
#rounded h3{
margin:0;
padding:30px 0 15px 10px;
background: url(rs.gif) no-repeat right top ;

}
#rounded p{
margin:0;
padding:0 0 0px 0;
background:url(zx.gif) no-repeat left bottom;

}
#rounded span{
display:block;
text-indent:2em;
margin:0;
padding:0 5px 30px 10px;
background:url(rx.gif) no-repeat right bottom;

}

</style>
</head>

<body>

<div id="rounded">
<h3>边框线边框线边框线</h3>
<p><span>这是一个固定宽度的圆角框，由于是固定宽度，因此制作起来容易和简单很多。这个圆角框上的上下随着内容增多可以自由伸展，圆角不会被破坏。这是一个固定宽度的圆角框，由于是固定宽度，因此制作起来容易和简单很多。这个圆角框上的上下随着内容增多可以自由伸展，圆角不会被破坏。这是一个固定宽度的圆角框，由于是固定宽度，因此制作起来容易和简单很多。这个圆角框上的上下随着内容增多可以自由伸展，圆角不会被破坏。这是一个固定宽度的圆角框，由于是固定宽度，因此制作起来容易和简单很多。这个圆角框上的上下随着内容增多可以自由伸展，圆角不会被破坏。</span></p>
</div>
</body>
</html>

posted on 2011-10-17 09:04 92筱静阅读(109) 评论(0) 收藏举报