CSS3按鈕凸起效果指的是通過使用CSS3技術,讓按鈕在頁面上具有立體的、凸起的效果,使其看起來更加生動、醒目,提高頁面的美觀程度。常用的實現方式是通過利用CSS3中的box-shadow屬性與border-radius屬性,通過設置不同的參數來實現。
.button { display: inline-block; padding: 10px 25px; font-size: 16px; font-weight: bold; text-align: center; color: #FFFFFF; background: #4CAF50; border-radius: 6px; box-shadow: #3D8B3D 0px 2px 0px; } .button:hover { box-shadow: #3D8B3D 0px 3px 0px; } .button:active { box-shadow: #2C6E2C 0px 1px 0px; }
上述代碼展示了如何實現一個簡單的凸起效果按鈕,其中box-shadow屬性用于設置按鈕的陰影效果,參數分別為顏色、橫向偏移量、縱向偏移量和模糊半徑;border-radius屬性用于設置按鈕的圓角半徑。在:hover偽類中可以設置按鈕鼠標懸浮時的效果,一般將box-shadow的縱向偏移量增加即可;:active偽類則用于設置按鈕被點擊時的效果,一般將box-shadow的顏色改成更深的顏色即可。
上一篇css3手冊 百度云
下一篇css3手工制作