CSS中橢圓模塊布局是一個有趣的設(shè)計技巧,可以讓網(wǎng)頁看起來更加美觀和現(xiàn)代化。使用CSS的border-radius屬性來制作橢圓形布局十分簡單,只需將border-radius的值設(shè)為50%即可。
.ellipse { width: 200px; height: 100px; border-radius: 50%; background-color: #ccc; }
以上代碼的結(jié)果將是一個寬高比為2:1的橢圓形模塊。如果需要調(diào)整橢圓形模塊的寬高比,可以像以下代碼一樣添加padding或使用絕對定位來調(diào)整橢圓形的大小。
.ellipse { width: 200px; height: 100px; border-radius: 50%; background-color: #ccc; padding-top: 50%; /* 2:1寬高比 */ }
也可以使用偽元素:before和:after來制作橢圓形組合。
.ellipse-group { position: relative; } .ellipse-group:before, .ellipse-group:after { position: absolute; content: ""; border-radius: 50%; } .ellipse-group:before { background-color: #ccc; width: 200px; height: 100px; top: -25%; left: -25%; } .ellipse-group:after { background-color: #eee; width: 100px; height: 50px; top: 25%; left: 50%; }
以上代碼的結(jié)果將會制作一個包含兩個橢圓形模塊的組合,前一個模塊的寬高比為2:1,后一個模塊的寬高比為2:1。通過調(diào)整:before和:after元素的位置和大小,可以創(chuàng)造出更加多樣化的組合形狀。