滑动门 圆角背景宽度和高度自适应
我要评论
第一张图用于高度自适应，第二张用于宽度自适应。如果觉得不够高或宽，可以修改图片。
实现的方法很简单，其实就是套2层，其中外层用长背景，内层用短背景盖住。拿高度自适应来说，可以用一个div（用长背景居底铺）嵌套一个h2（用短背景居顶铺）标签。
圆角背景高度自适应：
<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>内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容
</p>
</div>
宽度自适应的圆角按钮原来是一样的，只不过是改成横向的：
<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>
相关文章
- 字符代替圆角尖角也是一种在不使用代码和图片的另类实现吧，本文整理了一些常用的示例，感兴趣的朋友可以收藏下2013-09-12
- css圆角效果的出现引起了网友们的关注，下面以个示例为大家介绍下具体的实现过程，带有注释，新手朋友们容易看的懂2013-09-04
- 想做个页面用到css3的圆角和阴影效果，但ie浏览器不支持，之前也听说有插件可以实现，周六在网上找到了一个方法，原文如下： 但凡是前端工程师，都知道IE6，IE7，IE8不支2013-07-02
- css圆角卷起了一阵风波，只用css来做圆角矩形的技术很早就有了,但是在网页的设计过程中,我们通常用图片实现圆角矩形效果。现在网上很多关于无图片实现css圆角矩形的方法,虽2013-03-25
- css 圆角边框的出现结束了传统使用圆角图片的时代，接下来与大家分享下div 边框圆角的实现，感兴趣的你可以参考下哈，希望对你有所帮助2013-03-15
- 本文将开拓性的探讨如何使用字符代替图片实现貌似只有图片才能实现的尖角效果，或是多半使用图片实现的圆角效果;本文提到的一些方法，可能在实际项目中并不实用，关键是帮2013-02-27
- 今天处理了一个页面刷新随机显示图片的功能，发现直角太丑，想实现图片圆角，兼容所有浏览器,于是网上搜集整理了一下，拿出来和大家分享2012-12-06
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
border-radius：用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox 和 Safari 3支持该属性。2012-03-28background-postion定位与图片结合实现圆角效果
background-postion 背景默认铺设位置的起点为：元素的左上角.2011-07-27- 矩形框在网页中较为常见，不过个人觉得还是圆角框更为美观。那么圆角框是如何用DIV+CSS来实现的呢？2011-07-10
最新评论