在CSS中,我們可以使用一些屬性和技巧來手繪圖形的描邊效果。
.box { width: 100px; height: 100px; border: 2px solid #000; border-radius: 50%; position: relative; } .box:before { content: ''; position: absolute; top: -2px; left: -2px; width: 100%; height: 100%; border: 2px solid #f00; border-radius: 50%; z-index: -1; }
上面的代碼可以實現一個紅色外描邊的圓形,具體思路是在原始的圓形的前面加上一個偽元素,設置該偽元素的樣式為一個邊框為紅色的同樣大小的圓形,將其放置在圓形之前,并設置z-index屬性使其在背景下面顯示。
除了描邊圓形外,我們還可以嘗試描邊半透明圖形:
.triangle { width: 0; height: 0; border-top: 50px solid rgba(255,0,0,0.5); border-right: 50px solid transparent; border-left: 50px solid transparent; position: relative; } .triangle:before { content: ''; position: absolute; top: -2px; left: -2px; width: 100%; height: 100%; border-top: 52px solid #000; border-right: 52px solid transparent; border-left: 52px solid transparent; border-radius: 5px; z-index: -1; }
上面的代碼可以實現一個半透明的三角形,具體思路是在三角形的前面加上一個偽元素,該偽元素的樣式同樣為三角形,但是邊框為黑色,將其放置在三角形之前,并設置z-index屬性使其在背景下面顯示。
除了上述的樣式外,我們還可以嘗試其他形狀和顏色的描邊,需要注意的是,在使用偽元素時,需要將其設置為絕對定位,并且設置z-index屬性使其在背景下面顯示。同時,需要根據實際情況調整描邊的寬度和顏色,使其最終呈現出我們想要的效果。
上一篇css打包到jar