CSS3按鈕凸起效果指的是通過使用CSS3技術(shù),讓按鈕在頁面上具有立體的、凸起的效果,使其看起來更加生動、醒目,提高頁面的美觀程度。常用的實現(xiàn)方式是通過利用CSS3中的box-shadow屬性與border-radius屬性,通過設(shè)置不同的參數(shù)來實現(xiàn)。
.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; }
上述代碼展示了如何實現(xiàn)一個簡單的凸起效果按鈕,其中box-shadow屬性用于設(shè)置按鈕的陰影效果,參數(shù)分別為顏色、橫向偏移量、縱向偏移量和模糊半徑;border-radius屬性用于設(shè)置按鈕的圓角半徑。在:hover偽類中可以設(shè)置按鈕鼠標(biāo)懸浮時的效果,一般將box-shadow的縱向偏移量增加即可;:active偽類則用于設(shè)置按鈕被點擊時的效果,一般將box-shadow的顏色改成更深的顏色即可。
上一篇css3手冊 百度云
下一篇css3手工制作