万梅资源网 Design By www.ubjie.com
Dreamweaver中想要制作一个立体阴影的按钮,该怎么制作呢?下面我们就来看看详细的教程。
- 软件名称:
- Adobe Dreamweaver CC 2018 V18.0 中文/英文安装版 32/64位
- 软件大小:
- 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制作圆角按钮?
万梅资源网 Design By www.ubjie.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
万梅资源网 Design By www.ubjie.com
暂无评论...
www.ubjie.com
万梅资源网
19,976影音资源
44,792技术资源
1,817软件资源
451,128站长资源
最新文章
友情链接
杰晶网络
DDR爱好者之家
桃源资源网
杰网资源
富贵资源网
南强小屋
铁雪资源网
幽灵资源网
万梅资源网
狼山资源网
白云岛资源网
昆仑资源网
相思资源网
明霞山资源网
内蒙古资源网
黑松山资源网
茶园资源网
饿虎岗资源网
大旗谷资源网
常春岛资源网
岱庙资源网
兴国资源网
快活林资源网
蝙蝠岛资源网
帝王谷资源网
白云城资源网
伏龙阁资源网
清风细雨楼
天枫庄资源网
圆月山庄资源网
无争山庄资源网
神水资源网
移花宫资源网
神剑山庄资源网
无为清净楼资源网
金钱帮资源网
丐帮资源网
华山资源网
极乐门资源网
小李飞刀资源网
凤求凰客栈
风云阁资源网
金狮镖局
鸳鸯亭资源网
千金楼资源网
更多链接
万梅资源网 Design By www.ubjie.com