如何在html元素底部添加凹形边框？

Question

我正在尝试构建 Netflix 主页的克隆版，以磨练我的网页设计技能。 Netflix 主页的英雄部分底部有一个凹形边框。我在 Netflix 克隆主页的底部添加了直线边框。我想让它成为一个凹形边框，模仿真实的 Netflix 主页。以下是我想要的结果（真实的 Netflix 主页）和迄今为止实现的设计（Netflix 克隆主页）的图像。先谢谢了。

我在英雄部分的底部添加了一个直线边框，但我想在英雄部分底部的位置添加一个凹形边框。

Answer 1

也许Netflix可以告诉你：在此输入图片描述

.default-ltr-cache-1f97ztc {
        box-sizing: border-box;
        position: absolute;
        height: 100px;
        width: 100%;
        top: 0;
        margin: auto;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border: solid .25rem transparent;
        border-top-left-radius: 50% 100%;
        border-top-right-radius: 50% 100%;
        border-bottom: none;
        background: radial-gradient(50% 500% at 50% -420%, rgba(64, 97, 231, 0.4) 80%, rgba(0, 0, 0, 0.1) 100%), black;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }

    .default-ltr-cache-1f97ztc:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        margin-top: -.25rem;
        border-radius: inherit;
        background: linear-gradient(to right, rgba(33, 13, 22, 1) 16%, rgba(184, 40, 105, 1), rgba(229, 9, 20, 1), rgba(184, 40, 105, 1), rgba(33, 13, 22, 1) 84%);
    }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>demo</title>
</head>
<body>

    <div class="default-ltr-cache-1f97ztc">
        
    </div>

</body>
</html>

如何在html元素底部添加凹形边框？

问题描述投票：0回答：1

1个回答

最新问题

如何在html元素底部添加凹形边框？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1