足球小将世界杯:Dreamweaver按钮怎么添加立体阴影效果?

足球竞彩网 www.2ts2.com.cn 百度经验   发布时间:2018-06-15 17:35:10   作者:yangxin_25   我要评论

Dreamweaver按钮怎么添加立体阴影效果?之前我们介绍dw制作按钮的教程,现在我们来看看给按钮添加立体阴影效果的教程,需要的朋友可以参考下

Dreamweaver中想要制作一个立体阴影的按钮,该怎么制作呢?下面我们就来看看详细的教程。

软件名称:
Adobe Dreamweaver CC 2018 V18.0 中文/英文破解版(附注册机+安装教程) 32/64位
软件大?。?/dt>
968MB
更新时间:
2017-10-19

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中box shadow怎么添加阴影?

Dreamweaver文字怎么添加多个不同的阴影?

Dreamweaver怎么用CSS制作圆角按钮?

相关文章

  • Dreamweaver中vm文件怎么设置高亮显示?

    Dreamweaver中vm文件怎么设置高亮显示?Dreamweaver中有很多vm的扩展文件,该怎么将这些文件设置成高亮呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2016-08-11
  • Dreamweaver建立的站点怎么更改图像的默认文件夹位置?

    Dreamweaver建立的站点怎么更改图像的默认文件夹位置?Dreamweaver中为了让素材更好管理,各种素材都会建立文件夹,下面我们就来看看更改站点图形默认文件夹的教程,需要的
    2016-08-10
  • Dreamweaver在网页中怎么添加图片呢?

    这篇教程主要是向脚本之家的朋友分享Dreamweaver在网页中怎么添加图片方法,教程比较基础,适合新手来学习,推荐过来,一起来学习吧
    2016-08-09
  • Dreamweaver怎么给网页添加样式表的关联?

    Dreamweaver怎么给网页添加样式表的关联?想给网页添加样式表约束的链接,该怎么添加呢?下面我们就来看看详细的设置教程,,需要的朋友可以参考下
    2016-08-08
  • Dreamweaver怎么新建网页并保存?

    Dreamweaver怎么新建网页并保存?Dreamweaver制作网页很容易,今天我们就来看看基础教程,使用Dreamweaver建立网页并保存,很简单,需要的朋友可以参考下
    2016-08-01
  • Dreamweaver光标的落位总是不准怎么办?

    Dreamweaver光标的落位总是不准怎么办?Dreamweaver中制作网页的时候,发现鼠标的落位总是不对,该怎么办呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2016-07-28
  • Dreamweaver简单制作用户注册表单

    在浏览各大论坛时,会发现有些内容是仅限会员观看的,那么如何利用Dreamweaver来制作用户注册的,下面就为大家介绍一下,来看看吧
    2016-07-06
  • dreamweaver如何改变代码的字体大小?

    很多的时候,我们看代码时间长了就会觉得代码很小,看起来很累,想将代码字体设置大一点,该怎么设置呢,下面小编就为大家介绍dreamweaver如何改变代码的字体大小方法,来看看
    2016-06-23
  • 8款替代Dreamweaver的开源网页开发工具

    这篇文章主要为大家详细介绍了8款替代Dreamweaver的开源网页开发工具,感兴趣的小伙伴们可以参考一下
    2016-06-23
  • dreamweaver8调出新建、打开两个命令的快捷工具栏

    今天小编为大家分享dreamweaver8调出新建、打开两个命令的快捷工具栏方法,教程很基础,适合新手来学习,推荐过来,来看看吧
    2016-06-22

最新评论