1、首先用DW制作一個按鈕,可以參考下方引用經驗來制作。
2、然后我們在按鈕樣式中添加一個投影的代碼【box-shadow: 10px 10px 10px #B00000;】數值分別代表左右距離、上下距離、陰影過度、陰影顏色。具體我們來了解下。
3、我們把第一個數值修改成0并保存后,刷新網頁可以看到效果,陰影從右下方向移動到了正下方。
4、我們把陰影過度數值改成0并保存后,刷新網頁可以看到陰影就沒有過度的特效了。
5、我們再把上下距離的數值修改成5px,可以看到陰影位置里按鈕更近一些了。
6、我們把左右距離、上下距離的數值設置為0,陰影過度設置為30px,保存網頁刷新后可以看到,按鈕四周有了陰影過度的效果。
7、我們把左右距離的數值設置為-5px,可以看到陰影移動到了按鈕的左側。
8、左右距離的數值為-5px保持不變,把上下距離的數值也設置為-5px,可以看到陰影到了按鈕的上方。
9、了解了代碼后,我們把陰影設置為【box-shadow: 0px 5px 0 #B00000;】,再添加一個鼠標經過后的陰影,就是如下效果啦。是不是有種立體按鈕的感覺呢?
以上就是Dreamweaver制作立體陰影按鈕的教程,希望大家喜歡,請繼續關注VeVb武林網。
新聞熱點
疑難解答