CSS3是一個很強大的前端工具,可以實現(xiàn)各種各樣的效果。今天,我們來學(xué)習(xí)如何使用CSS3來實現(xiàn)Tab圓角。
.tab { border-radius: 5px 5px 0 0; background-color: #fff; } .tab li { display: inline-block; padding: 10px; } .tab li.active { background-color: #ccc; border-bottom: 1px solid #fff; } .tab-content { border-radius: 0 5px 5px 5px; background-color: #fff; padding: 10px; margin-top: -1px; }
首先,我們需要設(shè)置一個Tab容器,并設(shè)置它的圓角屬性。這里我們選擇設(shè)置上左和上右的圓角,而下左和下右的圓角不設(shè)置,這樣就可以讓Tab底部保持平直。
然后,我們需要創(chuàng)建Tab里面的選項卡。我們將每個選項卡設(shè)置為行內(nèi)塊元素,并設(shè)置一些基本樣式,例如內(nèi)邊距。
接下來,我們需要給當(dāng)前選中的選項卡增加一些樣式。我們可以使用`.active`類來實現(xiàn)這個功能,例如改變選項卡的背景顏色并增加一個底部的白色線條。
最后,我們需要設(shè)置Tab內(nèi)容區(qū)的樣式。它的圓角屬性應(yīng)該設(shè)置為下左、下右和上右,而上左的圓角不設(shè)置。這樣就可以讓Tab內(nèi)容區(qū)的底部與Tab容器保持一致。
通過這些CSS3代碼,我們可以輕松地實現(xiàn)任何形狀的Tab,為網(wǎng)頁提供更加美觀的界面。