CSS3中提供了一種繪制多邊形邊框的方法,可以用來制作一些有趣的圖案、邊框樣式等。使用border屬性,配合border-radius和transform實現。
.box{ width: 200px; height: 200px; border: 20px solid transparent; border-top-color: red; border-right-color: green; border-bottom-color: blue; border-left-color: yellow; border-radius: 50%; transform: rotate(45deg); }上述代碼實現了一個正方形的四面邊框,每個邊框顏色不同,同時添加了圓角和旋轉效果,形成了一個彩色的八邊形。
.box{ width: 0; height: 0; border: 50px solid transparent; border-bottom-color: red; border-right-color: blue; border-top-color: green; border-left-color: yellow; }上述代碼實現了一個菱形效果,通過設置寬高為0,邊框寬度為50px,邊框顏色不同來實現,該方法還可以實現三角形、梯形等效果。 需要注意的是,在使用多邊形邊框時,需要清楚自己所需要的邊數和邊的長度比例,才可以正確的繪制出多邊形效果。同時,通過設置不同顏色的邊框,可以實現更多的樣式效果。
上一篇css3多行布局
下一篇css3多張撲克牌旋轉