滑动门-圆角背景宽度和高度自适应

三里屯摇滚

滑动门-圆角背景宽度和高度自适应

第一张图用于高度自适应，第二张用于宽度自适应。如果觉得不够高或宽，可以修改图片。

实现的方法很简单，其实就是套2层，其中外层用长背景，内层用短背景盖住。拿高度自适应来说，可以用一个div（用长背景居底铺）嵌套一个h2（用短背景居顶铺）标签。

圆角背景高度自适应：

1. <style type="text/css">body,div,p,h2{ margin:0; padding:0;}div{width:262px; margin:100px auto 0; background:url(images/hua1.png) right bottom no-repeat; overflow:hidden;}h2{ width:262px; height:36px; text-indent:35px; background:url(images/hua1.png) left top no-repeat;}div p{ padding:10px;}</style><div>    <h2>标题</h2>    <p>内容内容内容内容内容内容内容内容内容内容内容内容<br />内容内容内容内容内容内容内容内容内容内容内容内容<br /></p></div>复制代码

复制代码

宽度自适应的圆角按钮原来是一样的，只不过是改成横向的：

1. <style type="text/css">body,ul,li{ margin:0; padding:0;}ul{ list-style:none; overflow:hidden;}li{ float:left; display:inline; height:30px; margin-left:10px; background:url(images/hua2.png) right top no-repeat;}li span{ float:left; display:block; height:30px; padding:0 10px; line-height:30px; text-align:center; background:url(images/hua2.png) left bottom no-repeat;}</style><ul>    <li><span>三个字</span></li>    <li><span>六个字六个字</span></li></ul>复制代码

复制代码

阳光的扣子

谢谢分享