日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

搜索
分享

CSS布局實例：僅一張圖片實現(xiàn)圓角！ - 勁歌金曲 - 網(wǎng)易博客

 playfish 2008-01-31

CSS布局實例：僅一張圖片實現(xiàn)圓角！

　  這個代碼是UDSKY推薦給我的一段用圖片版的圓角代碼，于是分析代碼寫個教程，這段代碼最大的優(yōu)點是：只使用了一張圖片，代碼簡單，很容易上手．不足之處在于做這種圓角BOX所在的背景區(qū)為單一色！還是直入正題吧！

　　準備一張圖片（我們要使用的那張背景圖，四個角都是這張背景圖四個部位顯示出來的）．最初學(xué)習(xí)圓角時，我承想過用一張四分之一的圓，然后背景圖旋轉(zhuǎn)／翻轉(zhuǎn)不就可以用以用在四個角上了吧，但是CSS中沒有這種功能，只好放棄這種不實際的想法！


圓角部分放大圖：


HTML代碼：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<DIV class=cssbox>
<DIV class=cssbox_head>
<H2>標題</H2>
</DIV>
<DIV class=cssbox_body>
<P>內(nèi)容</P>
</DIV>
</DIV>

　　思路：盒子cssbox內(nèi)放入兩個box，上部分box做成兩個角（cssbox_head右角，H2左角），下部分box也做一個角的背景圖（左角）．cssbox_body內(nèi)一個右下角．


第一步：
　　這一步是最簡單的，在一個盒子中定義一個右下角的背景圖片．
　　CSS代碼

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
*{
 padding:0;
 margin:0;
}/*與本教程無關(guān)的代碼*/
.cssbox{ 
 background: transparent url(http://www./attachments/month_0706/img.png) no-repeat;
}
.cssbox{
 background-;right;
 width:380px;
 margin:20px auto;/*與本教程無關(guān)的代碼*/
}

　　瀏覽器中看到的效果見下圖：


　　執(zhí)行代碼：
div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www./1999/xhtml"> <HEAD> <TITLE>Untitled Document</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css> } .cssbox{ background: transparent url(http://www./attachments/month_0706/img.png) no-repeat; } .cssbox{ background- right; } </STYLE> <META content="MSHTML 6.00.2900.2995" </HEAD> <BODY> <DIV <DIV <H2>標題</H2> </DIV> <DIV <P>內(nèi)容</P> </DIV> </DIV> </BODY> </HTML>
    [ 可先修改部分代碼 再運行查看效果 ]

第二步
　　我們定義右上角的樣式，這一步也不難做到，因為定義背景圖定義在右上，背景圖圓角外部分又不是透明，而是白色，所以白色區(qū)蓋住cssbox_body的綠色部分．
　　CSS代碼

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
{
 padding:0;
 margin:0;
}
.cssbox,.cssbox_head{ 
 background: transparent url(http://www./attachments/month_0706/img.png) no-repeat;
}
.cssbox{
 background-;right;
 width:380px;
 margin:20px auto;
}
.cssbox_head{
 background-;right;
}

　　瀏覽器中看到的效果見下圖：


div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/1999/REC-html401-19991224/loose.dtd">
<HTML 
xmlns="http://www./1999/xhtml">
<HEAD>
<TITLE>Untitled Document</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>
{
    padding:0;
    margin:0;
}
.cssbox,.cssbox_head{ 
    background: transparent url(http://www./attachments/month_0706/img.png) no-repeat;
}
.cssbox{
    background-;right;
    width:380px;
    margin:20px auto;
}
.cssbox_head{
    background-;right;
}

</STYLE>
<META content="MSHTML 6.00.2900.2995" name=GENERATOR>
</HEAD>
<BODY>
<DIV class=cssbox>
  <DIV class=cssbox_head>
    <H2>標題</H2>
  </DIV>
  <DIV class=cssbox_body>
    <P>內(nèi)容</P>
  </DIV>
</DIV>
</BODY>
</HTML>

第三步
　　經(jīng)過以上的兩步我們已經(jīng)做了出兩個角了，在接著做第三個角，定義在H2中也就是左上角．為了美觀一些，我們在H2中加入補白10PX,
　　CSS代碼

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
{
 padding:0;
 margin:0;
}
.cssbox,.cssbox_head,.cssbox_head h2{ 
 background: transparent url(http://www./attachments/month_0706/img.png) no-repeat;
}
.cssbox{
 background-;right;
 width:380px;
 margin:20px auto;
}
.cssbox_head{
 background-;right;
}
.cssbox_head h2{ 
 background-;left;
 margin:0;
 padding:10px; 
}

　　執(zhí)行代碼：

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www./1999/xhtml"> <HEAD> <TITLE>Untitled Document</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css> } .cssbox,.cssbox_head,.cssbox_head h2{ background: transparent url(http://www./attachments/month_0706/img.png) no-repeat; } .cssbox{ background- right; } .cssbox_head{ background- right; } .cssbox_head h2{ background- left; } </STYLE> <META content="MSHTML 6.00.2900.2995" </HEAD> <BODY> <DIV <DIV <H2>標題</H2> </DIV> <DIV <P>內(nèi)容</P> </DIV> </DIV> </BODY> </HTML>
    [ 可先修改部分代碼 再運行查看效果 ]



　　疑點：奇怪了，為什么實際上并不是我們想要的效果？我們在看一下問題出在哪，應(yīng)該是我們定義的第三個角的背景圖蓋住了右上cssbox_head中的角，解決的方法有兩種：
　　第一種：H2可以加一個右邊界這樣H2的背景就不會在蓋住cssbox_head的的那個角了；
　　第二種：反向思維，cssbox_head中加入一個右補白，這樣H2中的背景圖也不會蓋住cssbox_head中的角；
　　這里我們選用第二種方法．

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
.cssbox_head{
 background-;right;
 padding-right:10px;
}
.cssbox_head h2{ 
 background-;left;
 padding:10px 0 10px 10px; 
}

　　執(zhí)行代碼：

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www./1999/xhtml"> <HEAD> <TITLE>Untitled Document</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css> } .cssbox,.cssbox_head,.cssbox_head h2{ background: transparent url(http://www./attachments/month_0706/img.png) no-repeat; } .cssbox{ background- right; } .cssbox_head{ background- right; } .cssbox_head h2{ background- left; } </STYLE> <META content="MSHTML 6.00.2900.2995" </HEAD> <BODY> <DIV <DIV <H2>標題</H2> </DIV> <DIV <P>內(nèi)容</P> </DIV> </DIV> </BODY> </HTML>
    [ 可先修改部分代碼 再運行查看效果 ]


第四步
　　這一步和第三步很相似，這里就不會在犯錯誤了，根據(jù)實際情況只能選用第一種方法．
　　css代碼

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
*{
 padding:0;
 margin:0;
}
.cssbox,.cssbox_head,.cssbox_head h2,.cssbox_body{ 
 background: transparent url(http://www./attachments/month_0706/img.png) no-repeat;
}
.cssbox{
 background-;right;
 width:380px;
 margin:20px auto;
}
.cssbox_head{
 background-;right;
 padding-right:10px;
}
.cssbox_head h2{ 
 background-;left;
 padding:10px 0 10px 10px; 
}
.cssbox_body{ 
 background-;left; 
 margin-right:10px; /* interior-padding right */ 
 padding:0px 0 10px 10px;
}

　　完整的代碼：

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www./1999/xhtml"> <HEAD> <TITLE>Untitled Document</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css> } .cssbox,.cssbox_head,.cssbox_head h2,.cssbox_body{ background: transparent url(http://www./attachments/month_0706/img.png) no-repeat; } .cssbox{ background- right; } .cssbox_head{ background- right; } .cssbox_head h2{ background- left; } .cssbox_body{ background- left; } </STYLE> <META content="MSHTML 6.00.2900.2995" </HEAD> <BODY> <DIV <DIV <H2>標題</H2> </DIV> <DIV <P>內(nèi)容</P> </DIV> </DIV> </BODY> </HTML>
    [ 可先修改部分代碼 再運行查看效果 ]

最終效果圖



　　終于完成我們的＂大作＂了！從上面我們可以看出，定義這種效果的樣式是先從父元素到子元素定義的，也就是從外層向內(nèi)層定義，這是因為，越是內(nèi)層的的圖／背景，它在顯示時確是在外層的．
　　在內(nèi)容區(qū)如果P或其它元素有邊界的情況下會出現(xiàn)邊界疊加現(xiàn)象，在這里只要給cssbox_body加入一個1PX下補白就可以解決這種問題的發(fā)生，關(guān)于邊界疊加見網(wǎng)站中＜邊界疊加＞這篇文章．

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多