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