css drop-shadow使用方法

最新推荐文章于 2024-07-15 16:33:50 发布

心若向阳无谓悲伤

最新推荐文章于 2024-07-15 16:33:50 发布

阅读量7.9k

点赞数

本文链接：https://blog.csdn.net/qq_31490071/article/details/88716960

版权

Web知识学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

大家可能都习惯了使用box-shadow来设置盒阴影，但顾名思义，盒阴影一般阴影的投影是一个方形，如果我们遇到其他姓张，想要做阴影效果应该怎么实现呢，比如下面这种？

那就要用到drop-shadow啦~drop-shadow滤镜可以给元素或图片非透明区域添加投影。

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平偏移量

v-shadow：垂直偏移量

blur：模糊值

spread：偏移量

color：阴影颜色

inset：是否内阴影(外阴影不写)

上面这种效果怎么实现呢，直接上代码：

<!doctype html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8">
	<title>An example</title>
	<meta name="viewport" content="width=device-width">
<style>
.tri-right {
	width: 0;   //设置宽度为0
	height: 0;  //设置高度为0
	border-top: 3.125rem solid transparent;   
	border-left: 6.25rem solid dodgerblue;
	border-bottom: 3.125rem solid transparent;
	margin-bottom: 5rem;
	/*box-shadow: 8px 8px 6px #333;*/
	-webkit-filter: drop-shadow(8px 8px 6px #333);
	        filter: drop-shadow(8px 8px 6px #333);

}
</style>
</head>
<body>
	<div class="tri-right"></div>
</body>
</html>