CSS是一種強大的樣式設計語言,常用于網頁的美化和布局。其中,兩層border是一種常用的效果,它可以讓元素的邊框更加醒目。
.box { border: 4px solid #f4f4f4; border-width: 4px 0; position: relative; } .box::before { content: ""; display: block; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 4px solid #ccc; }
上述代碼中,我們先定義了.box元素的邊框為4px寬的實線,同時將上下邊框的寬度設為0,實現了只有左右邊框的效果。
接下來,我們使用偽元素:before來創(chuàng)建一個與.box相同大小的空白元素,并在其中再創(chuàng)建一層4px寬的灰色實線邊框,這樣就實現了兩層邊框的效果。
需要注意的是,在偽元素中設置的邊框寬度要比.box中設置的邊框寬度要窄4px,否則兩層邊框會相互重疊,使效果無法實現。
通過兩層border,我們可以為網頁的元素增加更多的框架樣式,提高瀏覽者的視覺體驗。