css drop-shadow 与box-shadow

Koreyoshi·

已于 2023-10-07 11:02:36 修改

阅读量236

点赞数

文章标签： css 前端

于 2023-10-07 10:55:20 首次发布

本文链接：https://blog.csdn.net/koreyoshi123654/article/details/133634518

版权

drop-shadow 与box-shadow

在这里插入图片描述

<template>
  <div class="drop">DROP-SHADOW</div>
  <div class="box">BOX-SHADOW</div>
</template>
<style scoped>
.drop {
  height: 6em;
  padding: 1.5em;
  filter: drop-shadow(0 0 2em #646cffaa);
}
.box{
  height: 6em;
  padding: 1.5em;
  box-shadow: 0 0 10px red;
}

/* 鼠标悬浮添加drop-shadow效果 */
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

</style>