CSS3橢圓邊框是CSS3的一種新特性,用來實現圓形或橢圓形邊框,使得網頁設計更加美觀、個性化。以下是一些實現此效果的代碼示例。
/* 圓形邊框 */ div { border-radius: 50%; width: 200px; height: 200px; border: 5px solid blue; } /* 橢圓形邊框 */ div { border-radius: 100%/50%; width: 300px; height: 200px; border: 5px solid red; }
代碼中,border-radius屬性用來設置邊框的圓角弧度,若兩個參數相等則為圓形邊框,若兩個參數不等則為橢圓形邊框。width和height屬性用來設置元素的寬度和高度,border屬性用來設置邊框的寬度、顏色和樣式。
此外,還可以通過CSS3的偽元素:before和:after配合border-radius屬性來實現更為復雜的圖形邊框,如下面的示例代碼。
div { width: 200px; height: 200px; border: none; position: relative; } div:before { content: ""; position: absolute; top: 0; left: 0; width: 200px; height: 200px; border-radius: 0 0 50% 50%; border-top: 5px solid yellow; border-right: 5px solid green; } div:after { content: ""; position: absolute; bottom: 0; right: 0; width: 200px; height: 200px; border-radius: 50% 0 0 50%; border-bottom: 5px solid blue; border-left: 5px solid red; }
以上代碼通過偽元素:before和:after實現了一個四邊相等的不規則多邊形邊框,實現起來也相對簡單,只需設置元素的position屬性為relative,然后通過:before和:after設置絕對定位的偽元素的位置、寬度、高度和邊框樣式等屬性。