css drop-shadow 与box-shadow

drop-shadow 与box-shadow

<template>
  <div class="drop">DROP-SHADOWdiv>
  <div class="box">BOX-SHADOWdiv>
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28