尾风中多个容器的单梯度

Question

我用的是对尾风的反应

我需要对Navbar和Sidebar应用相同的梯度

但在这两种情况下施加梯度会产生不同的流量。请给我解决办法！

 <navbar className="flex h-16 w-full bg-gradient-to-r from-gray-800 to-blue-800 justify-center"></navbar>

 <sidebar className='flex absolute h-full w-1/4 bg-gradient-to-r from-gray-800 to-blue-800'></sidebar>

​

​

Answer 1

如果您可以确保您的导航条是100 to，那么您可以添加伪元素到侧边栏，并添加梯度背景。如果有一个垂直滚动条，它可能会稍微移动梯度。您可以将同样的技巧应用于导航栏以避免这种行为，但是overflow:hidden可能会影响一些溢出元素，比如菜单下拉列表。在这种情况下，您可以嵌套另一个完全宽度，高度，absolute div然后添加伪元素到您的肚脐栏。

<div className="flex h-16 w-full justify-center bg-gradient-to-r from-gray-800 to-blue-800 overflow-y-scroll"></div>

<div className="relative flex h-full w-1/4 overflow-hidden from-gray-800 to-blue-800 before:h-full before:absolute before:w-screen before:bg-gradient-to-r before:content-[''] before:-z-10"></div>

代码可以找到这里