CSS渐变边框底部

ep6jt1vc 于 2024-01-09 发布在其他

关注(0)|答案(3)|浏览(133)

使用Bootstrap 5导航栏，我尝试做一个简单的40px高度的垂直边框底部，从颜色#e5e5e5到颜色#fefefe以下是示例图像：

的数据
谢谢你，如果你有一个最后的想法，因为我正在与之斗争，没有任何成功：英
非常感谢

css

来源：https://stackoverflow.com/questions/77762784/css-gradiant-border-bottom

3条答案

按热度按时间

k4aesqcs1#

使用border-image

.box {
  height: 150px;
  background: lightblue;
  border-image: 
    linear-gradient(#e5e5e5,#fefefe) 0 0 100% 0/
    0 0 40px 0/0 0 40px 0; /* adjust both 40px to control the size */
}

个字符

赞(0）回复(0）举报 2024-01-09

q9yhzks02#

边界不能有渐变（目前还没有）。
使用drop-shadow过滤器或伪元素。
下拉阴影 * 效果 * 真的是你所需要的，所以根据需要调整颜色。

投影

header {
  height: 75px;
  background: lightblue;
  margin-bottom: 1em;
}

.filter {
  filter: drop-shadow(0px 5px 5px grey)
}

个字符

伪元素

header {
  height: 75px;
  background: lightblue;
  margin-bottom: 1em;
}

.pseudo {
  position: relative;
}

.pseudo:before {
  content: "";
  position: absolute;
  top: 100%;
  width: 100%;
  left: 0;
  height: 40px;
  background: linear-gradient(#e5e5e5, #fefefe);
}

<header class="pseudo"></header>

的字符串

赞(0）回复(0）举报 2024-01-09

clj7thdc3#

我试图解决你的问题。

<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>

字符串

赞(0）回复(0）举报 2024-01-09

我来回答

CSS渐变边框底部

3条答案

相关问题

热门标签

最新问答