如何使阴影放置在响应式边框上答案

【问题标题】：How to make drop shadow lay on border on responsive如何使阴影放置在响应式边框上
【发布时间】：2017-05-25 15:58:41
【问题描述】：

当您将鼠标悬停在所有导航区域上时，我的网站上有一个很好的流程，您会看到一个红色的文字和红色的阴影，它在整个网站上都是流畅的。

我今天注意到在响应式视图、皮肤和模板页面上，鼠标悬停在边框下方，看起来很糟糕。我希望这与桌面网站一样。

由于这些在移动设备上被分成 5 个单独的盒子，我认为这可能与它有关。

我不喜欢这些标签上的这个移动视图，所以如果改变它们的显示方式是有意义的，我也可以这样做。

我已经弄乱了阴影的边距，但无济于事。

.gallery-menu-wrapper ul li {
    border: 6px solid #333;
    display: inline-block;
    float: none;
    margin: 6px 3px;
}

网页链接

http://dagrafixdesigns.com/2019/industrial-darker/skins.html

宁愿尽量保持简单，因为我可能忽略了插入或 - 追加保证金通知，但如果所有其他方法都失败，伪类调用可能会起作用？

谢谢

【问题讨论】：

标签： twitter-bootstrap css media-queries pseudo-class

【解决方案1】：

如果您希望 DOM 中先前元素的阴影在悬停后出现在元素顶部，请将 position: relative; z-index: 1; 添加到 .tp-navigations .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus

【讨论】：

@MCoker 我将您的评论标记添加到我的代码中，但我没有看到缩小的变化，鼠标悬停在边框下方仍然.. 桌面视图上的站点过去和现在都是完美的鼠标悬停，正是这个移动秤正在下降。 .tp-navigations .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #fc3c3b;背景颜色：透明；框阴影：0 8px 0 0 #fc3c3b；位置：相对； z-index: 1!important;}
您是否将其添加到 dagrafixdesigns.com/2019/industrial-darker/css/style.css 的第 206 行的规则中？如果是这样，我看不到它。此外，在屏幕截图中，这不是您的网站导航 - 您所说的那些按钮有问题吗？我以为是页面顶部的按钮。在我看来，您屏幕截图中的按钮在网站上看起来不错。
是的，它已添加到第 206 行，请参阅屏幕截图dagrafixdesigns.com/2019/industrial-darker/images/css.jpg 但是没有顶部菜单很好，整个网站的所有菜单也是如此......它仅在移动视图上......所以查看手机或平板电脑上的 SKINS 链接或 TEMPLATE 链接并触摸方形按钮....看看阴影如何落在边框下方？我正在尝试使其统一并使其下降到底部边框的顶部，就像它在桌面视图中的整个站点一样......希望这会有所帮助，如果我不清楚，请抱歉。
但是由于那不是目标元素区域，所以这无济于事，我现在将从第 206 行中删除它...目标区域的移动响应 css 调用是此代码 .gallery -menu-wrapper ul li {border: 6px solid #333;显示：内联块；浮动：无；边距：6px 3px； }
啊，现在我明白了。抱歉，我在看这个，由于当前导航项的背景，底部边框没有显示 - i.imgur.com/TFbI1GH.png

【解决方案2】：

当您的导航 (.gallery-menu-wrapper ul li) 向下响应时，responsive.css（第 21 行）会在元素周围添加一个 6 像素的边框。

如果您将border-bottom-width: 0px !important; 添加到悬停状态，则会反转此效果，并且投影会按预期排列。

【讨论】：

该代码只是删除了悬停状态的底部边框，而不是我想要的。我确实将以下代码添加到响应式 css 文件中，并且 drop 确实在内部向上移动，但是它仍然向北很远，因为我希望悬停状态阴影正好位于底部边框的 TOP 上，就像查看时一样在桌面上。 .our-project .gallery-menu-wrapper ul li:hover { background-color: #2f2f2f ;盒子阴影：0 -8px 0 0 #fc3c3b inset；颜色：#fc3c3b； z指数：2； }
我刚刚在代码中添加了一个 INSET，使它悬停在内部而不是外部，正如您在发布的代码中看到的那样。它很接近但还没有，如果有的话，哈哈。
@DA-G-GURU - 是的，看到了。问题仍然在于该边框，它仅在页面缩小时添加到各个元素中。底部的边框将您的投影向下推。
完全正确，有没有办法解决这个问题？我的意思是，如果它无法修复或疼痛，我可以按原样离开。
让我来运行一下，将移动视图的代码更改为针对悬停状态的底部边框会更好还是根本没有效果？或者之后的伪类呢？