巧用cssborder_html/css

來源：懂視網責編：小采時間：2020-11-27 15:53:55

巧用cssborder_html/css

巧用cssborder_html/css_WEB-ITnose:上下左右邊框交界處呈現平滑的斜線。利用這個特點，通過設置不同的上下左右邊框寬度或顏色，可以得到小三角、梯形等。調整寬度大小可以調節三角形形狀。實現三角形示例1： #test1{ height:20px; width:20px; border-color:#FF960

推薦度：

點擊下載本文 文檔為doc格式

導讀巧用cssborder_html/css_WEB-ITnose:上下左右邊框交界處呈現平滑的斜線。利用這個特點，通過設置不同的上下左右邊框寬度或顏色，可以得到小三角、梯形等。調整寬度大小可以調節三角形形狀。實現三角形示例1： #test1{ height:20px; width:20px; border-color:#FF960

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

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

實現三角形

示例1：

#test1{ height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0ed7a; border-style:solid; border-width:20px;}

示例2：

在上面的基礎上，把高度寬度都設為0時，會呈現邊界斜線。

#test2 { height:0; width:0; overflow: hidden; /* 這里設置overflow, font-size, line-height */ font-size: 0; /*是因為, 雖然寬高度為0, 但在IE6下會具有默認的 */ line-height: 0; /* 字體大小和行高, 導致盒子呈現被撐開的長矩形 */ border-color:#FF9600 #3366ff #12ad2a #f0eb7a; border-style:solid; border-width:20px;}

示例3：

示例2中可以看到有4個三角形了，如果把4種顏色，只保留一種顏色，余下3種顏色設置為透明或者與背景色相同，那就形成一個三角形。

#test3 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 transparent transparent transparent; border-style:solid; border-width:20px;}

示例4：

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

#test4 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 transparent transparent transparent; border-style:solid dashed dashed dashed; border-width:20px;}

示例5：

上述畫的小三角的斜邊都是依靠原來盒子的邊，還有另一種形式的小三角，斜邊在盒子的對角線上。

#test5 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 #3366ff transparent transparent; border-style:solid solid dashed dashed; border-width:40px 40px 0 0 ;}

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

實現圓角效果

可以實現近似圓角，其實是一個非常小的梯形展示出來的。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com