圓角和陰影是CSS3中較為常用的樣式效果,下面我們來詳細講解如何使用CSS3實現圓角和陰影效果。
圓角
要實現圓角效果,可以使用border-radius屬性。該屬性常用于設置元素的圓角大小。
element { border-radius: 10px; }
上述代碼將元素的四個角都設置為10像素的圓角。如果只想設置某一個角,可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius分別設置上左角、上右角、下左角和下右角。
element { border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-left-radius: 30px; border-bottom-right-radius: 40px; }
陰影
要實現陰影效果,可以使用box-shadow屬性。該屬性常用于設置元素的陰影大小、顏色等效果。
element { box-shadow: 2px 2px 10px #888888; }
上述代碼將元素添加了一個向右下角偏移2像素、大小為10像素的灰色陰影。如果想要添加多重陰影效果,可以使用逗號分隔多個陰影設置。
element { box-shadow: 2px 2px 5px #888888, -2px -2px 5px #cccccc; }
上述代碼將元素添加了兩重陰影效果,一重向右下角偏移2像素、大小為5像素的灰色陰影;另一重向左上角偏移2像素、大小為5像素的淺灰色陰影。
以上就是CSS3中圓角和陰影的使用介紹,希望對大家有所幫助。
上一篇圓角css怎么設