滑動門 圓角背景寬度和高度自適應
我要評論
第一張圖用于高度自適應，第二張用于寬度自適應。如果覺得不夠高或寬，可以修改圖片。
實現的方法很簡單，其實就是套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 圓角邊框的出現結束了傳統(tǒng)使用圓角圖片的時代，接下來與大家分享下div 邊框圓角的實現，感興趣的你可以參考下哈，希望對你有所幫助2013-03-15
- 本文將開拓性的探討如何使用字符代替圖片實現貌似只有圖片才能實現的尖角效果，或是多半使用圖片實現的圓角效果;本文提到的一些方法，可能在實際項目中并不實用，關鍵是幫2013-02-27
- 今天處理了一個頁面刷新隨機顯示圖片的功能，發(fā)現直角太丑，想實現圖片圓角，兼容所有瀏覽器,于是網上搜集整理了一下，拿出來和大家分享2012-12-06
CSS圓角效果 -webkit-border-radius(CSS3中border-radius隱藏的威力)
border-radius：用這個屬性能實現圓角邊框的效果?，F在只有Mozilla/Firefox 和 Safari 3支持該屬性。2012-03-28background-postion定位與圖片結合實現圓角效果
background-postion 背景默認鋪設位置的起點為：元素的左上角.2011-07-27- 矩形框在網頁中較為常見，不過個人覺得還是圓角框更為美觀。那么圓角框是如何用DIV+CSS來實現的呢？2011-07-10