9. 渐变阴影

最新推荐文章于 2024-07-12 21:49:18 发布

LBJ辉

最新推荐文章于 2024-07-12 21:49:18 发布

阅读量222

点赞数 8

分类专栏： code 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_36081714/article/details/136842042

版权

code 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>渐变阴影</title>
    <style>
      .box {
        width: 250px;
        height: 400px;
        margin: 2em auto;
        position: relative;
        border: 2px solid #000;
        --x: 20px;
        --y: 20px;
      }
      .box::after {
        content: '';
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: 100%;
        height: 100%;
        filter: blur(10px); /* 实现高斯模糊效果，周边会出现扩展的白边 */
        z-index: -1;
        /* top right bottom bottm 都是 0 */
        /* inset: 0;  */
        background: conic-gradient(#ffd700, #f79d03, #ee6907, #e6390a, #d61039, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
        clip-path: polygon(
          -100vmax -100vmax,
          100vmax -100vmax,
          100vmax 100vmax,
          -100vmax 100vmax,
          -100vmax -100vmax,
          calc(0px - var(--x)) calc(0px - var(--y)),
          calc(0px - var(--x)) calc(100% - var(--y)),
          calc(100% - var(--x)) calc(100% - var(--y)),
          calc(100% - var(--x)) calc(0px - var(--y)),
          calc(0px - var(--x)) calc(0px - var(--y))
        );
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>