付费节点推荐
免费节点
节点使用教程
box-shadow与filter的drop-shadow的使用方法介绍，以及他们的使用实际例子…
同样的参数值，表现效果有差异
filter中的drop-shadow语法如下
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滤镜</title>
<style>
img{
margin: 100px;
}
.img1{
filter:drop-shadow(5px 5px 10px black)
}
.img2{
box-shadow: 5px 5px 10px black;
}
#div1{
margin: 100px;
width: 100px;
height: 100px;
border: 1px solid antiquewhite;
box-shadow: inset 5px 4px 10px #000000;
}
</style>
</head>
<body>
<div>
<img class="img1" src="11.jpg" alt="">
<img class="img2" src="11.jpg" alt="">
<div id="div1">
</div>
</div>
</body>
</html>
结果如下图
分析可以得到使用同样参数值的box-shadow，box-shadow的阴影距离更小，色值要更深
box-shadow支持inset内阴影，drop-shadow却没有
drop-shadow 的优势
应用1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滤镜</title>
<style>
#div1{
width: 150px;
height: 150px;
border: 10px dashed black;
margin: 100px;
box-shadow: 5px 5px 10px red;
}
#div2{
width: 150px;
height: 150px;
border: 10px dashed black;
margin: 100px;
filter: drop-shadow(5px 5px 10px red)
}
</style>
</head>
<body>
<div>
<div id="div1">
</div>
<div id="div2">
</div>
</div>
</body>
</html>
应用2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滤镜</title>
<style>
body{background: #ddd}
#div1{
width: 150px;
height: 150px;
background: white;
margin: 100px;
box-shadow: 5px 5px 10px red;
}
#div2{
width: 150px;
height: 150px;
background: white;
margin: 100px;
filter: drop-shadow(5px 5px 10px red)
}
.tt{
width:0;
height:0;
border-top:30px solid transparent;
border-right:30px solid #fff;
border-bottom:30px solid transparent;
margin-left: -30px;
}
</style>
</head>
<body>
<div>
<div id="div1">
<p class="tt"></p>
</div>
<div id="div2">
<p class="tt"></p>
</div>
</div>
</body>
</html>
未经允许不得转载：Bcoder资源网 » box-shadow与filter的drop-shadow
评论前必须登录！
登陆 注册