如果背景是渐变的，如何将边框颜色更改为背景颜色？答案

【问题标题】：How to change border color to background color if background is gradient?如果背景是渐变的，如何将边框颜色更改为背景颜色？
【发布时间】：2012-09-27 02:41:07
【问题描述】：

我想将我的活动菜单项的底部边框更改为网站背景颜色，使其看起来像一个打开的标签，但我的背景是渐变的，因此它在网站的不同部分具有不同的颜色。我怎么做。我无法将其更改为无，因为我在需要覆盖的整个菜单下方有另一个边框。这是我网站的链接 http://woodworkingoc.com.hostasp.info/

【问题讨论】：

如果底部边框在所有浏览器上总是出现在相对于背景颜色的相同位置，那么只需识别该特定点的颜色即可。如果您遇到问题，可以使用颜色选择器实用程序从浏览器中对其进行采样。
并不是我赞同这种方法；您可能应该只使用图像；但是您可以做的是打印您的网页，将其粘贴到图像编辑器中，放大线条所在的位置，然后使用滴管工具确定紧邻边框线的渐变 BG 的十六进制颜色。使用那种颜色...
@kinakuta 取决于用户的屏幕尺寸，它可能会略有不同，但如果没有其他方法，我会试一试。谢谢！

标签： html css

【解决方案1】：

我检查了您的 .CSS 文件。

对于nav > ul li.current，您有background 属性，前缀为FF、IE 和Chrome。但是这个属性有问题，所以 Chrome 和 FF 在 web 检查器中隐藏了这个属性，而不是将它应用于元素。如果正确写入属性，渐变将应用于li 元素并覆盖<div id="layout-navigation" class="group"> 的底部边框。

使用渐变生成器（如http://www.colorzilla.com/gradient-editor/）创建正确的渐变规则。例如：

nav > ul li.current {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #B9BDBF), color-stop(100%, #5C5E5F)) fixed;
}

【讨论】：

我试过 colorzilla 并且他们的自动生成的渐变搞砸了。它们有时会以一堆条纹的形式出现，或者如果页面是半屏，那么渐变看起来就像在半页上复制了两个渐变。我真的很高兴我拥有的那些。它们非常微妙，但我喜欢它们。