關(guān)于CSS border虛線(xiàn)邊框屬性教程

　　上下左右邊框交界處呈現平滑的斜線(xiàn)。利用這個(gè)特點(diǎn)，通過(guò)設置不同的上下左右邊框寬度或顏色，可以得到小三角、梯形等。

　　調整寬度大小可以調節三角形形狀。

　　實(shí)現三角形

　　示例1：

　　CSS Code復制內容到剪貼板 #test1{ height:20px; width:20px; border-color:#FF9600#3366ff#12ad2a#f0ed7a; border-style:solid; border-width:20px; }

　　示例2：

　　在上面的基礎上，把高度寬度都設為0時(shí)，會(huì )呈現邊界斜線(xiàn)。

　　CSS Code復制內容到剪貼板 #test2{ height:0; width:0; overflow:hidden;/*這里設置overflow,font-size,line-height*/ font-size:0;/*是因為,雖然寬高度為0,但在IE6下會(huì )具有默認的*/ line-height:0;/*字體大小和行高,導致盒子呈現被撐開(kāi)的長(cháng)矩形*/ border-color:#FF9600#3366ff#12ad2a#f0eb7a; border-style:solid; border-width:20px; }

　　示例3：

　　示例2中可以看到有4個(gè)三角形了，如果把4種顏色，只保留一種顏色，余下3種顏色設置為透明或者與背景色相同，那就形成一個(gè)三角形。 CSS Code復制內容到剪貼板 #test3{ height:0; width:0; overflow:hidden; font-size:0; line-height:0; border-color:#FF9600transparenttransparenttransparent; border-style:solid; border-width:20px; }

　　示例4：

　　示例3中，在IE6下，需要設置余下三邊的border-style為dashed，即可達到透明的效果。

　　CSS Code復制內容到剪貼板 #test4{ height:0; width:0; overflow:hidden; font-size:0; line-height:0; border-color:#FF9600transparenttransparenttransparent; border-style:soliddasheddasheddashed; border-width:20px; }

　　示例5：

　　上述畫(huà)的小三角的斜邊都是依靠原來(lái)盒子的邊，還有另一種形式的小三角，斜邊在盒子的對角線(xiàn)上。

　　CSS Code復制內容到剪貼板 #test5{ height:0; width:0; overflow:hidden; font-size:0; line-height:0; border-color:#FF9600#3366fftransparenttransparent; border-style:solidsoliddasheddashed; border-width:40px40px00; }

　　保留其中一種顏色，就可以得到斜邊在對角線(xiàn)上的三角形了。

　　實(shí)現圓角效果

　　可以實(shí)現近似圓角，其實(shí)是一個(gè)非常小的梯形展示出來(lái)的。

　　XML/HTML Code復制內容到剪貼板.test{width:200px;height:50px;} .test.top{width:194px;border-color:transparenttransparent#FF9600transparent;*border-color:pinkpink#FF9600pink;border-style:dasheddashedsoliddashed;border-width:3px;filter:chroma(color=pink);} .test.center{width:200px;height:40px;background-color:#FF9600;} .test.bottom{width:194px;height:5px;border-color:#FF9600transparenttransparenttransparent;*border-color:#FF9600pinkpinkpink;border-style:soliddasheddasheddashed;border-width:3px;filter:chroma(color=pink);}

　　以上就是本文的全部?jì)热�，希望對大家的學(xué)習有所幫助。

【CSS border虛線(xiàn)邊框屬性教程】相關(guān)文章：

css屬性定位教程07-23

CSS入門(mén)教程01-25

Word段落添加邊框的教程09-22

CSS閉合浮動(dòng)元素教程06-26

CSS選擇器教程06-05

CSS教程之盒模型10-17

word中表格的邊框和底紋設置教程02-24

關(guān)于CSS教程:復合型條狀圖表01-25

CSS基礎教程之背景圖片07-31

CSS-層疊樣式表基礎教程08-10