圓角邊框陰影是網頁設計中常用的美化效果之一,可以讓一個頁面看起來更加現代化和精致。而實現這樣的效果,就需要使用CSS代碼進行設置。
/* 圓角邊框 */ .rounded { border-radius: 5px; } /* 陰影效果 */ .shadow { box-shadow: 2px 2px 3px #999; }
以上代碼分別為設置圓角邊框和陰影的CSS代碼,其中 .rounded 為設置樣式的類名,可根據需要自行修改。border-radius: 5px; 表示邊框為圓角,數值越大弧度越大。box-shadow: 2px 2px 3px #999; 表示設置陰影,2px 2px 分別表示水平與垂直偏移量,3px 為模糊半徑,#999 為陰影顏色。
當然,還可以通過將兩個樣式組合起來,即可實現同時設置圓角邊框和陰影的效果:
/* 圓角邊框和陰影 */ .rounded-shadow { border-radius: 5px; box-shadow: 2px 2px 3px #999; }
以上代碼為設置同時設置圓角邊框和陰影的CSS代碼,其中的類名 .rounded-shadow 可以自行修改。同時,CSS樣式中還有其他屬性可以調整圓角邊框和陰影的效果,比如邊框顏色、陰影樣式等等,可以根據需要進行設置。
上一篇圓角css無映射