多语言展示
当前在线:1909今日阅读:84今日分享:32

CSS怎么制作阴影效果

CSS发展到CSS3版本之后,在前端的表现越来越出现,例如,使用CSS3可以实现一个阴影效果,只要使用CSS的属性box-shadow即可box-shadow语法:offset-x offset-y[ blur spread color position];
工具/原料
1

电脑一台

2

CSS

方法/步骤
1

新建一个HTML文档,并定义一个包含图片的

2

保存文件以后,预览文档的原始效果,

3

定义div的CSS属性,示例:   

4

阴影部分的box-shadow详细设置,示例:            /*定义BOX的阴影属性*/            box-shadow: 10px 10px 5px #333;             /*常用的是以上4个属性,分别是:            1、横坐标偏移量(相对于元素的左上角定点);            2、纵坐标偏移量(相对于元素的左上角定点);            3、模糊距离(对阴影边界进行模糊处理,防止过于锐利);            4、阴影部分的颜色*/

5

设置之后,保存文件,预览查看BOX-SHADOW的效果,

注意事项
1

重点在第四步

2

喜欢此经验,请投票和点赞

推荐信息