Dreamweaver按钮怎么添加立体阴影效果?
百度经验 发布时间：2018-06-15 17:35:10 作者：yangxin_25 
我要评论
我要评论Dreamweaver按钮怎么添加立体阴影效果？之前我们介绍dw制作按钮的教程，现在我们来看看给按钮添加立体阴影效果的教程，需要的朋友可以参考下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
Dreamweaver中想要制作一个立体阴影的按钮，该怎么制作呢？下面我们就来看看详细的教程。
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制作立体阴影按钮的教程，希望大家喜欢，请继续关注程序员之家。
相关推荐：
相关文章
- Dreamweaver中vm文件怎么设置高亮显示？Dreamweaver中有很多vm的扩展文件，该怎么将这些文件设置成高亮呢？下面我们就来看看详细的教程，需要的朋友可以参考下2016-08-11
Dreamweaver建立的站点怎么更改图像的默认文件夹位置?
Dreamweaver建立的站点怎么更改图像的默认文件夹位置？Dreamweaver中为了让素材更好管理，各种素材都会建立文件夹，下面我们就来看看更改站点图形默认文件夹的教程，需要的2016-08-10- 这篇教程主要是向程序员之家的朋友分享Dreamweaver在网页中怎么添加图片方法，教程比较基础，适合新手来学习，推荐过来，一起来学习吧2016-08-09
- Dreamweaver怎么给网页添加样式表的关联？想给网页添加样式表约束的链接，该怎么添加呢？下面我们就来看看详细的设置教程，,需要的朋友可以参考下2016-08-08
- Dreamweaver怎么新建网页并保存？Dreamweaver制作网页很容易，今天我们就来看看基础教程，使用Dreamweaver建立网页并保存，很简单，需要的朋友可以参考下2016-08-01
- Dreamweaver光标的落位总是不准怎么办？Dreamweaver中制作网页的时候，发现鼠标的落位总是不对，该怎么办呢？下面我们就来看看详细的教程，需要的朋友可以参考下2016-07-28
- 在浏览各大论坛时，会发现有些内容是仅限会员观看的，那么如何利用Dreamweaver来制作用户注册的，下面就为大家介绍一下，来看看吧2016-07-06
- 很多的时候,我们看代码时间长了就会觉得代码很小,看起来很累,想将代码字体设置大一点,该怎么设置呢，下面小编就为大家介绍dreamweaver如何改变代码的字体大小方法，来看看2016-06-23
- 这篇文章主要为大家详细介绍了8款替代Dreamweaver的开源网页开发工具，感兴趣的小伙伴们可以参考一下2016-06-23
- 今天小编为大家分享dreamweaver8调出新建、打开两个命令的快捷工具栏方法，教程很基础，适合新手来学习，推荐过来，来看看吧2016-06-22
最新评论