div+css打造可變高寬的圓角框
發(fā)布時(shí)間：2011-07-10 21:59:47 作者：佚名 
我要評(píng)論
我要評(píng)論矩形框在網(wǎng)頁(yè)中較為常見，不過(guò)個(gè)人覺得還是圓角框更為美觀。那么圓角框是如何用DIV+CSS來(lái)實(shí)現(xiàn)的呢？
假如把一張圓角框圖片直接作為背景來(lái)處理，那么高寬就都被定死了，無(wú)法隨內(nèi)容而改變大小。今天，我學(xué)會(huì)了一種方法來(lái)設(shè)計(jì)可變高寬的圓角框。先來(lái)看看效果圖：
<div id="m_category" class="round2">
<h3>管理中心</h3>
<div class="con">
<p><a href="Categorymanager.aspx">類別管理</a></p>
<p><a href="Newsmanager">新聞管理</a></p>
<p><a href="Addnews">添加新聞</a></p>
</div>
<div class="footer">
<p> </p>
</div>
</div>
css
*
{
padding:0;
margin:0;
}
body
{
font-size:14px;
}
a:link, a:visited
{
color: #000;
text-decoration: none;
}
a:hover
{
color: #00f;
text-decoration: underline;
}
#m_category
{
width:200px;
}
#m_category .con p
{
padding:10px;
}
.round2
{
background-image:url("../images/round2_left_top.gif");
background-position:top left;
background-repeat:no-repeat;
}
.round2 h3
{
background:url("../images/round2_right_top.gif") no-repeat top right;
padding-left:35px;
padding-top:12px;
padding-bottom:12px;
font-size:16px;
font-weight:bold;
}
.round2 .con
{
height:200px;
padding:0 20px;
background:url("../images/round2_right_middle.gif") repeat-y top right;
}
.round2 .footer
{
background:url("../images/round2_left_bottom.gif") no-repeat bottom left;
}
.round2 .footer p
{
background:url("../images/round2_right_bottom.gif") no-repeat bottom right;
}
從上述代碼中可以看到，round2將圖片1作為了背景，h3標(biāo)簽將圖片2作為了背景，con將圖片3作為了背景，foote中的p標(biāo)簽將圖片4作為了背景，footer將標(biāo)簽5作為了背景。我們先從最底下的那層開始講起。當(dāng)round2中的內(nèi)容不足以填滿第1個(gè)圖片時(shí)，那么只顯示圖片1的部分。此時(shí)，將圖片5疊加到圖片1上。這樣就達(dá)到了控制高度的目的?？刂茖挾绕鋵?shí)也是同一個(gè)原理。我們通過(guò)h3標(biāo)簽和p標(biāo)簽將圖片2和圖片4疊加到圖片1和圖片5上，這樣就實(shí)現(xiàn)了可變寬度。剩下的只要讓con中的圖片3沿y軸平鋪下來(lái)，那么整個(gè)圓角框的結(jié)構(gòu)就形成了。
這種通過(guò)將圓角框分割成5個(gè)圖片來(lái)控制高寬的方法，雖然達(dá)到了可變高寬的目的，但是缺點(diǎn)很明顯，就是圖片1需要切的比較大。有沒(méi)有更好的方法呢？網(wǎng)上我看到了一種不需要背景圖片來(lái)實(shí)現(xiàn)可變高寬圓角框的方法。
為了達(dá)到可變高寬的效果，首先應(yīng)將圖片分割成五塊。如下圖：
為什么這么分割？為什么圖片1需要切成這么大呢？這樣就能實(shí)現(xiàn)可變高寬了？這些問(wèn)題不急于回答，我們不妨先來(lái)閱讀下源碼。
復(fù)制代碼
代碼如下:<div id="m_category" class="round2">
<h3>管理中心</h3>
<div class="con">
<p><a href="Categorymanager.aspx">類別管理</a></p>
<p><a href="Newsmanager">新聞管理</a></p>
<p><a href="Addnews">添加新聞</a></p>
</div>
<div class="footer">
<p> </p>
</div>
</div>
css
復(fù)制代碼
代碼如下:*
{
padding:0;
margin:0;
}
body
{
font-size:14px;
}
a:link, a:visited
{
color: #000;
text-decoration: none;
}
a:hover
{
color: #00f;
text-decoration: underline;
}
#m_category
{
width:200px;
}
#m_category .con p
{
padding:10px;
}
.round2
{
background-image:url("../images/round2_left_top.gif");
background-position:top left;
background-repeat:no-repeat;
}
.round2 h3
{
background:url("../images/round2_right_top.gif") no-repeat top right;
padding-left:35px;
padding-top:12px;
padding-bottom:12px;
font-size:16px;
font-weight:bold;
}
.round2 .con
{
height:200px;
padding:0 20px;
background:url("../images/round2_right_middle.gif") repeat-y top right;
}
.round2 .footer
{
background:url("../images/round2_left_bottom.gif") no-repeat bottom left;
}
.round2 .footer p
{
background:url("../images/round2_right_bottom.gif") no-repeat bottom right;
}
從上述代碼中可以看到，round2將圖片1作為了背景，h3標(biāo)簽將圖片2作為了背景，con將圖片3作為了背景，foote中的p標(biāo)簽將圖片4作為了背景，footer將標(biāo)簽5作為了背景。我們先從最底下的那層開始講起。當(dāng)round2中的內(nèi)容不足以填滿第1個(gè)圖片時(shí)，那么只顯示圖片1的部分。此時(shí)，將圖片5疊加到圖片1上。這樣就達(dá)到了控制高度的目的?？刂茖挾绕鋵?shí)也是同一個(gè)原理。我們通過(guò)h3標(biāo)簽和p標(biāo)簽將圖片2和圖片4疊加到圖片1和圖片5上，這樣就實(shí)現(xiàn)了可變寬度。剩下的只要讓con中的圖片3沿y軸平鋪下來(lái)，那么整個(gè)圓角框的結(jié)構(gòu)就形成了。
這種通過(guò)將圓角框分割成5個(gè)圖片來(lái)控制高寬的方法，雖然達(dá)到了可變高寬的目的，但是缺點(diǎn)很明顯，就是圖片1需要切的比較大。有沒(méi)有更好的方法呢？網(wǎng)上我看到了一種不需要背景圖片來(lái)實(shí)現(xiàn)可變高寬圓角框的方法。
相關(guān)文章
- 字符代替圓角尖角也是一種在不使用代碼和圖片的另類實(shí)現(xiàn)吧，本文整理了一些常用的示例，感興趣的朋友可以收藏下2013-09-12
- css圓角效果的出現(xiàn)引起了網(wǎng)友們的關(guān)注，下面以個(gè)示例為大家介紹下具體的實(shí)現(xiàn)過(guò)程，帶有注釋，新手朋友們?nèi)菀卓吹亩?/div> 2013-09-04想做個(gè)頁(yè)面用到css3的圓角和陰影效果，但ie瀏覽器不支持，之前也聽說(shuō)有插件可以實(shí)現(xiàn)，周六在網(wǎng)上找到了一個(gè)方法，原文如下： 但凡是前端工程師，都知道IE6，IE7，IE8不支2013-07-02
div+css用邊框?qū)崿F(xiàn)圓角矩形(多樣式)
css圓角卷起了一陣風(fēng)波，只用css來(lái)做圓角矩形的技術(shù)很早就有了,但是在網(wǎng)頁(yè)的設(shè)計(jì)過(guò)程中,我們通常用圖片實(shí)現(xiàn)圓角矩形效果?，F(xiàn)在網(wǎng)上很多關(guān)于無(wú)圖片實(shí)現(xiàn)css圓角矩形的方法,雖2013-03-25div+css無(wú)圖邊框圓角實(shí)現(xiàn)思路及代碼
css 圓角邊框的出現(xiàn)結(jié)束了傳統(tǒng)使用圓角圖片的時(shí)代，接下來(lái)與大家分享下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è)頁(yè)面刷新隨機(jī)顯示圖片的功能，發(fā)現(xiàn)直角太丑，想實(shí)現(xiàn)圖片圓角，兼容所有瀏覽器,于是網(wǎng)上搜集整理了一下，拿出來(lái)和大家分享2012-12-06CSS圓角效果 -webkit-border-radius(CSS3中border-radius隱藏的威力)
border-radius：用這個(gè)屬性能實(shí)現(xiàn)圓角邊框的效果?，F(xiàn)在只有Mozilla/Firefox 和 Safari 3支持該屬性。2012-03-28實(shí)現(xiàn)的方法很簡(jiǎn)單，其實(shí)就是套2層，其中外層用長(zhǎng)背景，內(nèi)層用短背景蓋住。拿高度自適應(yīng)來(lái)說(shuō)，可以用一個(gè)div（用長(zhǎng)背景居底鋪）嵌套一個(gè)h2（用短背景居頂鋪）標(biāo)簽2012-02-17background-postion定位與圖片結(jié)合實(shí)現(xiàn)圓角效果
background-postion 背景默認(rèn)鋪設(shè)位置的起點(diǎn)為：元素的左上角.2011-07-27最新評(píng)論