CSS3邊框陰影怎么用?
在CSS3中,我們可以使用box-shadow屬性來添加陰影效果。box-shadow屬性接受多個參數(shù),包括陰影的位置、大小、顏色和模糊半徑等。下面是一個簡單的例子:
div { box-shadow: 5px 5px 5px grey; }
這個例子中,我們給一個div添加了一個灰色的陰影,陰影向右5像素、向下5像素,大小為5像素,模糊半徑也為5像素。
除了box-shadow,我們還可以使用border-radius屬性來設(shè)置邊框圓角。border-radius屬性可以接受一個參數(shù),表示所有四個角的圓角程度,也可以接受四個參數(shù),分別表示四個角的圓角程度。下面是一個例子:
div { border-radius: 10px; }
這個例子中,我們給一個div設(shè)置了10像素的圓角。如果我們想給左上角和右下角設(shè)置不同的圓角程度,可以這樣寫:
div { border-top-left-radius: 20px; border-bottom-right-radius: 30px; }
這個例子中,我們分別給左上角和右下角設(shè)置了20像素和30像素的圓角程度。
綜上所述,CSS3的box-shadow和border-radius屬性為我們提供了更加靈活的邊框和陰影效果的設(shè)置,使得我們的網(wǎng)頁更加美觀和生動。