CSS渐变边框底部

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

我被某件事困住了。 使用 Bootstrap 5 导航栏，我尝试制作一个简单的 40px 高垂直边框底部，从颜色 #e5e5e5 到颜色 #fefefe 这是示例图片：

如果您有最终的想法，谢谢您，因为我正在与之斗争，但没有成功:(

非常感谢。

css bootstrap-5 border
1个回答
0
投票

我已尝试解决您的问题。

<html lang="en">
<head>
  <!-- Add Bootstrap CSS link here -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .custom-navbar {
      position: relative;
    }

    .navbar-border {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40px;
      background: linear-gradient(to right, #e5e5e5, #fefefe);
      content: "";
      z-index: -1;
    }
  </style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light custom-navbar">
  <!-- Your navbar content goes here -->
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Your Logo</a>
    <!-- Add other navbar elements as needed -->
  </div>
  <div class="navbar-border"></div> <!-- This div creates the border -->
</nav>

<!-- Add Bootstrap JS and Popper.js scripts here -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.