Dreamweaver按鈕怎么添加立體陰影效果?
我要評論Dreamweaver中想要制作一個立體陰影的按鈕，該怎么制作呢？下面我們就來看看詳細的教程。
1、首先用DW制作一個按鈕，可以參考下方引用經(jīng)驗來制作。
2、然后我們在按鈕樣式中添加一個投影的代碼【box-shadow: 10px 10px 10px #B00000;】數(shù)值分別代表左右距離、上下距離、陰影過度、陰影顏色。具體我們來了解下。
3、我們把第一個數(shù)值修改成0并保存后，刷新網(wǎng)頁可以看到效果，陰影從右下方向移動到了正下方。
4、我們把陰影過度數(shù)值改成0并保存后，刷新網(wǎng)頁可以看到陰影就沒有過度的特效了。
5、我們再把上下距離的數(shù)值修改成5px，可以看到陰影位置里按鈕更近一些了。
6、我們把左右距離、上下距離的數(shù)值設置為0，陰影過度設置為30px，保存網(wǎng)頁刷新后可以看到，按鈕四周有了陰影過度的效果。
7、我們把左右距離的數(shù)值設置為-5px，可以看到陰影移動到了按鈕的左側。
8、左右距離的數(shù)值為-5px保持不變，把上下距離的數(shù)值也設置為-5px，可以看到陰影到了按鈕的上方。
9、了解了代碼后，我們把陰影設置為【box-shadow: 0px 5px 0 #B00000;】，再添加一個鼠標經(jīng)過后的陰影，就是如下效果啦。是不是有種立體按鈕的感覺呢？
以上就是Dreamweaver制作立體陰影按鈕的教程，希望大家喜歡，請繼續(xù)關注腳本之家。
相關推薦：
相關文章
- Dreamweaver中vm文件怎么設置高亮顯示？Dreamweaver中有很多vm的擴展文件，該怎么將這些文件設置成高亮呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2016-08-11
Dreamweaver建立的站點怎么更改圖像的默認文件夾位置?
Dreamweaver建立的站點怎么更改圖像的默認文件夾位置？Dreamweaver中為了讓素材更好管理，各種素材都會建立文件夾，下面我們就來看看更改站點圖形默認文件夾的教程，需要的2016-08-10- 這篇教程主要是向腳本之家的朋友分享Dreamweaver在網(wǎng)頁中怎么添加圖片方法，教程比較基礎，適合新手來學習，推薦過來，一起來學習吧2016-08-09
Dreamweaver怎么給網(wǎng)頁添加樣式表的關聯(lián)?
Dreamweaver怎么給網(wǎng)頁添加樣式表的關聯(lián)？想給網(wǎng)頁添加樣式表約束的鏈接，該怎么添加呢？下面我們就來看看詳細的設置教程，,需要的朋友可以參考下2016-08-08- Dreamweaver怎么新建網(wǎng)頁并保存？Dreamweaver制作網(wǎng)頁很容易，今天我們就來看看基礎教程，使用Dreamweaver建立網(wǎng)頁并保存，很簡單，需要的朋友可以參考下2016-08-01
- Dreamweaver光標的落位總是不準怎么辦？Dreamweaver中制作網(wǎng)頁的時候，發(fā)現(xiàn)鼠標的落位總是不對，該怎么辦呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2016-07-28
- 在瀏覽各大論壇時，會發(fā)現(xiàn)有些內容是僅限會員觀看的，那么如何利用Dreamweaver來制作用戶注冊的，下面就為大家介紹一下，來看看吧2016-07-06
- 很多的時候,我們看代碼時間長了就會覺得代碼很小,看起來很累,想將代碼字體設置大一點,該怎么設置呢，下面小編就為大家介紹dreamweaver如何改變代碼的字體大小方法，來看看2016-06-23
8款替代Dreamweaver的開源網(wǎng)頁開發(fā)工具
這篇文章主要為大家詳細介紹了8款替代Dreamweaver的開源網(wǎng)頁開發(fā)工具，感興趣的小伙伴們可以參考一下2016-06-23- 今天小編為大家分享dreamweaver8調出新建、打開兩個命令的快捷工具欄方法，教程很基礎，適合新手來學習，推薦過來，來看看吧2016-06-22