<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.image img {
width: 300px;
margin: 50px 0 50px 50px;
}
/* 边框 */
.image .border {
border: 1px solid #333;
}
/* 阴影作用于整张图片外轮廓 */
.image .box-shadow {
box-shadow: 8px 8px 10px #333
}
/* 阴影作用于图片不透明内容 */
.image .drop-shadow {
-webkit-filter: drop-shadow(8px 8px 6px #333);
filter: drop-shadow(8px 8px 6px #333);
}
.triangle {
display: flex;
}
.triangle div {
width: 0;
border-top: 200px solid;
border-left: 200px solid;
border-color: transparent transparent transparent rgb(243, 195, 207);
margin: 50px 0 50px 50px;
}
/* 阴影作用于整个形状外轮廓 */
.triangle .box-shadow {
box-shadow: 8px 8px 10px #333;
}
/* 阴影作用于形状不透明内容 */
.triangle .drop-shadow {
-webkit-filter: drop-shadow(8px 8px 6px #333);
filter: drop-shadow(8px 8px 6px #333);
}
</style>
</head>
<body>
<div class="image">
<img class="border" src="./vip-card.png" alt="">
<img class="box-shadow" src="./vip-card.png" alt="">
<img class="drop-shadow" src="./vip-card.png" alt="">
</div>
<div class="triangle">
<div class="box-shadow"></div>
<div class="drop-shadow"></div>
</div>
</body>
</html>
css drop-shadow给元素或图片非透明区域添加投影
最新推荐文章于 2024-07-15 16:33:50 发布