您现在的位置是:首页 > IT分类 > html+js网站首页html+jsbox-shadown与drop-shadow的区别

box-shadown与drop-shadow的区别

  • 蓝天
  • html+js
  • 2020-08-22 10:08:12
简介box-shadowbox-shadow顾名思意“盒阴影”,只是盒子的阴影;它投影的容器,比如说你的图标中间有透明部分,但实际上透明部分依然会有投影;drop-shadowdrop-shadow就符合

box-shadow

box-shadow顾名思意“盒阴影”,只是盒子的阴影;它投影的容器,比如说你的图标中间有透明部分,但实际上透明部分依然会有投影;

drop-shadow

drop-shadow就符合真实世界的投影,非透明的颜色,我就有投影;透明部分,没投影,所以可以用来复制小图标啥的也是非常方便;

接下来实验一下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .dash1{
                width: 50px;
                height: 50px;
                margin: 0 auto;
                border: dashed 10px #beceeb;
                box-shadow: 5px 5px 10px black;
            }
            .dash2{
                width: 50px;
                height: 50px;
                margin: 50px auto;
                border: dashed 10px #beceeb;
                filter: drop-shadow(5px 5px 10px black);
            }
        </style>
    </head>
    <body>
        <div class="dash1"></div>
        <div class="dash2"></div>
    </body>
</html>
box-shadow效果如下:

aPQ蓝天个人博客-一个自学的好博客

aPQ蓝天个人博客-一个自学的好博客
aPQ蓝天个人博客-一个自学的好博客
aPQ蓝天个人博客-一个自学的好博客
aPQ蓝天个人博客-一个自学的好博客
aPQ蓝天个人博客-一个自学的好博客
drop-shadow效果如下:

aPQ蓝天个人博客-一个自学的好博客

aPQ蓝天个人博客-一个自学的好博客
aPQ蓝天个人博客-一个自学的好博客
aPQ蓝天个人博客-一个自学的好博客
aPQ蓝天个人博客-一个自学的好博客
aPQ蓝天个人博客-一个自学的好博客
aPQ蓝天个人博客-一个自学的好博客
可以很明显的看出区别,为什么会这样呢?在这里我用的是div标签,大家都知道,div标签是个块标签,说白了是个盒模型,指的是一块区域,box-shadow的属性只能添加到盒模型外面,因此内部的东西是不会添加上的,就变成上图的样子,中间还是白色部分。而drop-shadow就不一样了,他是把选中的所有的非透明区域都做了阴影效果,就相当于一种真正的投影,这里为了看得更清楚特意把边框弄成虚线,所以能看到凡是边框显示出来的部分,都有drop-shadow属性,这也就是为什么我说他是投影更确切。

转载: 感谢您对蓝天个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源蓝天个人博客 http://www.along168.cn”。

文章评论

联系方式