Question

我的目标是获得带有圆角的自定义div，然后在其上放置阴影，因为我们无法使用框阴影。我已经完成了这一部分（见下文）。问题是由于使用Skrollr（https://github.com/Prinzhorn/skrollr）造成的阴影，我有些滞后。是否可以在不使用投影的情况下在自定义div上重新创建这些阴影？

如果有帮助，您也可以修改我加工弯角的方式。

谢谢您的帮助！

html, body {
    margin: 0;
    padding: 0;
}

.frame {
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
    margin-top: 12rem;
    
}

.tile1 {
    background-image: radial-gradient(circle at 101.4% 0px, rgba(0, 0, 0, 0) 0, rgb(222,184,135, 0) 105px, coral 105px);
    height: 300px;
}

.tile2 {
    background-image: radial-gradient(circle at -1.4% 0px, rgba(0, 0, 0, 0) 0, rgb(222,184,135, 0) 105px, coral 105px);
    height: 300px;
}

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>custom div</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <div class="frame">
                        <div class="tile1"></div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="frame">
                        <div class="tile2"></div>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.5.0.min.js"   integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="   crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
</html>

Answer 1

也许使用伪元素成为阴影？

看起来与众不同。

见下文

    html,
    body {
      margin: 0;
      padding: 0;
      height: 200vh;
    }

    .frame {
      margin-top: 12rem;
      width: 500px;
      margin:100px auto;
    }

    .tile1 {
      background-image: radial-gradient(circle at 101.4% 0px, rgba(0, 0, 0, 0) 0, rgb(222, 184, 135, 0) 105px, coral 105px);
      height: 300px;
      filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
    }

    .tile2 {
      position: relative;
      background-image: radial-gradient(circle at -1.4% 0px, rgba(0, 0, 0, 0) 0, rgb(222, 184, 135, 0) 105px, coral 105px);
      height: 300px;
    }
    .tile2::after {
      content: '';
      z-index: -1;
      top: 0px;
      left: 8px;
      filter: blur(16px);
      position: absolute;
      background-image: radial-gradient(circle at -1.4% 0px, rgba(0, 0, 0, 0) 0, rgb(222, 184, 135, 0) 105px, rgba(0, 0, 0, 1) 105px);
      height: 100%;
      width: 100%;
    }

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>custom div</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <div class="frame">
                        <div class="tile1"></div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="frame">
                        <div class="tile2"></div>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.5.0.min.js"   integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="   crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
</html>

在自定义div上放置阴影而不使用阴影

1 个答案: