滑動(dòng)門 圓角背景寬度和高度自適應(yīng)

第一張圖用于高度自適應(yīng),第二張用于寬度自適應(yīng)。如果覺得不夠高或?qū)?,可以修改圖片。
實(shí)現(xiàn)的方法很簡單,其實(shí)就是套2層,其中外層用長背景,內(nèi)層用短背景蓋住。拿高度自適應(yīng)來說,可以用一個(gè)div(用長背景居底鋪)嵌套一個(gè)h2(用短背景居頂鋪)標(biāo)簽。
圓角背景高度自適應(yīng):
<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>標(biāo)題</h2>
<p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容
內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容
</p>
</div>
寬度自適應(yīng)的圓角按鈕原來是一樣的,只不過是改成橫向的:
<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>三個(gè)字</span></li>
<li><span>六個(gè)字六個(gè)字</span></li>
</ul>
相關(guān)文章
- 字符代替圓角尖角也是一種在不使用代碼和圖片的另類實(shí)現(xiàn)吧,本文整理了一些常用的示例,感興趣的朋友可以收藏下2013-09-12
- css圓角效果的出現(xiàn)引起了網(wǎng)友們的關(guān)注,下面以個(gè)示例為大家介紹下具體的實(shí)現(xiàn)過程,帶有注釋,新手朋友們?nèi)菀卓吹亩?/div> 2013-09-04想做個(gè)頁面用到css3的圓角和陰影效果,但ie瀏覽器不支持,之前也聽說有插件可以實(shí)現(xiàn),周六在網(wǎng)上找到了一個(gè)方法,原文如下: 但凡是前端工程師,都知道IE6,IE7,IE8不支2013-07-02
div+css用邊框?qū)崿F(xiàn)圓角矩形(多樣式)
css圓角卷起了一陣風(fēng)波,只用css來做圓角矩形的技術(shù)很早就有了,但是在網(wǎng)頁的設(shè)計(jì)過程中,我們通常用圖片實(shí)現(xiàn)圓角矩形效果?,F(xiàn)在網(wǎng)上很多關(guān)于無圖片實(shí)現(xiàn)css圓角矩形的方法,雖2013-03-25div+css無圖邊框圓角實(shí)現(xiàn)思路及代碼
css 圓角邊框的出現(xiàn)結(jié)束了傳統(tǒng)使用圓角圖片的時(shí)代,接下來與大家分享下div 邊框圓角的實(shí)現(xiàn),感興趣的你可以參考下哈,希望對(duì)你有所幫助2013-03-15使用字符代替圖片實(shí)現(xiàn)圓角或尖角效果研究
本文將開拓性的探討如何使用字符代替圖片實(shí)現(xiàn)貌似只有圖片才能實(shí)現(xiàn)的尖角效果,或是多半使用圖片實(shí)現(xiàn)的圓角效果;本文提到的一些方法,可能在實(shí)際項(xiàng)目中并不實(shí)用,關(guān)鍵是幫2013-02-27css實(shí)現(xiàn)圖片圓角 兼容所有瀏覽器實(shí)現(xiàn)代碼
今天處理了一個(gè)頁面刷新隨機(jī)顯示圖片的功能,發(fā)現(xiàn)直角太丑,想實(shí)現(xiàn)圖片圓角,兼容所有瀏覽器,于是網(wǎng)上搜集整理了一下,拿出來和大家分享2012-12-06CSS圓角效果 -webkit-border-radius(CSS3中border-radius隱藏的威力)
border-radius:用這個(gè)屬性能實(shí)現(xiàn)圓角邊框的效果。現(xiàn)在只有Mozilla/Firefox 和 Safari 3支持該屬性。2012-03-28background-postion定位與圖片結(jié)合實(shí)現(xiàn)圓角效果
background-postion 背景默認(rèn)鋪設(shè)位置的起點(diǎn)為:元素的左上角.2011-07-27矩形框在網(wǎng)頁中較為常見,不過個(gè)人覺得還是圓角框更為美觀。那么圓角框是如何用DIV+CSS來實(shí)現(xiàn)的呢?2011-07-10最新評(píng)論