css布局实现一个阴影开光效果代码-html代码-BFW代码库

css布局实现一个阴影开光效果代码

代码语言：html

代码描述：css布局实现一个阴影开光效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --shadow-color: 286deg 36% 58%;
          --shadow-elevation-low:
            0.3px 0.5px 0.7px hsl(var(--shadow-color, 0deg 0% 0%) / 0.32),
            0.4px 0.8px 1px -1.2px hsl(var(--shadow-color, 0deg 0% 0%) / 0.32),
            1px 1.9px 2.4px -2.5px hsl(var(--shadow-color, 0deg 0% 0%) / 0.32);
          --shadow-elevation-medium:
            0.3px 0.5px 0.7px hsl(var(--shadow-color, 0deg 0% 0%) / 0.33),
            0.8px 1.6px 2px -0.8px hsl(var(--shadow-color, 0deg 0% 0%) / 0.33),
            2px 4px 5px -1.7px hsl(var(--shadow-color, 0deg 0% 0%) / 0.33),
            4.8px 9.7px 12.2px -2.5px hsl(var(--shadow-color, 0deg 0% 0%) / 0.33);
          --shadow-elevation-high:
            0.3px 0.5px 0.7px hsl(var(--shadow-color, 0deg 0% 0%) / 0.31),
            1.4px 2.7px 3.4px -0.4px hsl(var(--shadow-color, 0deg 0% 0%) / 0.31),
            2.5px 5.1px 6.4px -0.7px hsl(var(--shadow-color, 0deg 0% 0%) / 0.31),
            4.2px 8.3px 10.5px -1.1px hsl(var(--shadow-color, 0deg 0% 0%) / 0.31),
            6.7px.........完整代码请登录后点击上方下载按钮下载查看