如何在HTML中添加阴影效果

html-css06

如何在HTML中添加阴影效果,第1张

在我们浏览网页的时候会发现有的网页在你鼠标划过的时候边缘会出现一层阴影效果,就比如

然后在样式中添加box-shadow,因为是鼠标滑到图片上面才显示阴影,所以我们要设置滑动,在滑动里面添加box-shadow,这里我是设了双层的阴影,就是给了双份的box-shadow,中间用逗号隔开,第一层控制图片外围的一圈白边,第二层控制阴影

当鼠标没有滑过图片时

当鼠标滑过图片时

box-shadow:后面有5个数值

第1个长度值⽤来设置对象的阴影⽔平偏移值。⽔平偏移量正值向, 右负值向左;

第2个长度值⽤来设置对象的阴影垂直偏移值。垂直偏移量正值向 ,下负值向上;

第3个长度值则⽤来设置对象的阴影模糊值。模糊度不能为负值;

第4个长度值则⽤来设置对象的阴影外延值。不允许负值

第5个是设置对象的阴影的颜⾊

是不是很神奇

我学识有限,若有错误,还望及时指出,以免误导他人,谢谢!!!

1、设置h3的style以此来添加text-shadow,这个就是文字的阴影了哦。它的参数分别表示阴影的水平距离,垂直距离以及模糊程度和阴影的颜色了。

2、前两个数值越大距离原来文字的距离就会越远哦。而第三个值越大那么阴影就会越模糊哦。

3、div元素添加阴影效果也是差不多的情况,不过用到的是box-shadow属性而已,参数也是一样的。

4、比方我就设置了div元素的红色阴影效果。

5、如果想要让div元素的阴影效果更加的逼真,那么可以适当的缩写数值哦。