|
CSS布局實例：僅一張圖片實現(xiàn)圓角！ 這個代碼是UDSKY推薦給我的一段用圖片版的圓角代碼，于是分析代碼寫個教程，這段代碼最大的優(yōu)點是：只使用了一張圖片，代碼簡單，很容易上手．不足之處在于做這種圓角BOX所在的背景區(qū)為單一色！還是直入正題吧！
準備一張圖片（我們要使用的那張背景圖，四個角都是這張背景圖四個部位顯示出來的）．最初學習圓角時，我承想過用一張四分之一的圓，然后背景圖旋轉／翻轉不就可以用以用在四個角上了吧，但是CSS中沒有這種功能，只好放棄這種不實際的想法！  圓角部分放大圖：  HTML代碼：  Example Source Code [www.52css.com]<DIV class=cssbox>
<DIV class=cssbox_head> <H2>標題</H2> </DIV> <DIV class=cssbox_body> <P>內容</P> </DIV> </DIV> 思路：盒子cssbox內放入兩個box，上部分box做成兩個角（cssbox_head右角，H2左角），下部分box也做一個角的背景圖（左角）．cssbox_body內一個右下角．  第一步： 這一步是最簡單的，在一個盒子中定義一個右下角的背景圖片． CSS代碼 Example Source Code [www.52css.com]*{
padding:0; margin:0; }/*與本教程無關的代碼*/ .cssbox{ background: transparent url(http://www./attachments/month_0706/img.png) no-repeat; } .cssbox{ background-;right; width:380px; margin:20px auto;/*與本教程無關的代碼*/ } 瀏覽器中看到的效果見下圖：  執(zhí)行代碼：  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>內容</P> </DIV> </DIV> </BODY> </HTML>
[ 可先修改部分代碼 再運行查看效果 ] 第二步 我們定義右上角的樣式，這一步也不難做到，因為定義背景圖定義在右上，背景圖圓角外部分又不是透明，而是白色，所以白色區(qū)蓋住cssbox_body的綠色部分． CSS代碼 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; } 瀏覽器中看到的效果見下圖：  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>內容</P> </DIV> </DIV> </BODY> </HTML> 第三步 經過以上的兩步我們已經做了出兩個角了，在接著做第三個角，定義在H2中也就是左上角．為了美觀一些，我們在H2中加入補白10PX, CSS代碼  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í)行代碼： 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>內容</P> </DIV> </DIV> </BODY> </HTML>
[ 可先修改部分代碼 再運行查看效果 ] 疑點：奇怪了，為什么實際上并不是我們想要的效果？我們在看一下問題出在哪，應該是我們定義的第三個角的背景圖蓋住了右上cssbox_head中的角，解決的方法有兩種： 第一種：H2可以加一個右邊界這樣H2的背景就不會在蓋住cssbox_head的的那個角了； 第二種：反向思維，cssbox_head中加入一個右補白，這樣H2中的背景圖也不會蓋住cssbox_head中的角； 這里我們選用第二種方法． Example Source Code [www.52css.com].cssbox_head{
background-;right; padding-right:10px; } .cssbox_head h2{ background-;left; padding:10px 0 10px 10px; } 執(zhí)行代碼： 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>內容</P> </DIV> </DIV> </BODY> </HTML>
[ 可先修改部分代碼 再運行查看效果 ] 第四步 這一步和第三步很相似，這里就不會在犯錯誤了，根據實際情況只能選用第一種方法． css代碼 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; } 完整的代碼： 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>內容</P> </DIV> </DIV> </BODY> </HTML>
[ 可先修改部分代碼 再運行查看效果 ] 最終效果圖 終于完成我們的＂大作＂了！從上面我們可以看出，定義這種效果的樣式是先從父元素到子元素定義的，也就是從外層向內層定義，這是因為，越是內層的的圖／背景，它在顯示時確是在外層的． 在內容區(qū)如果P或其它元素有邊界的情況下會出現(xiàn)邊界疊加現(xiàn)象，在這里只要給cssbox_body加入一個1PX下補白就可以解決這種問題的發(fā)生，關于邊界疊加見網站中＜邊界疊加＞這篇文章． |
|
|
