控制嵌入边框的两种颜色？答案

【问题标题】：Control the two colors of an inset border?控制嵌入边框的两种颜色？
【发布时间】：2013-07-12 02:25:48
【问题描述】：

我正在尝试看看是否有办法改变 CSS 中嵌入边框的两种颜色

如您所知，插入样式会在元素上创建一个边框，这会造成元素具有嵌入边框的错觉。它通过将底部和右侧边框设置为您选择的颜色来实现这一点，并将顶部和左侧边框的颜色更改为稍暗的阴影。

有没有人知道一种方法可以控制颜色的深浅，或者甚至可以控制交替阴影的不同颜色？

#myElement{
    border: inset 1px white;
}

谢谢。

【问题讨论】：

这个问题太愚蠢了，我刚刚意识到阅读这个问题。不过，我会保留它，以防万一其他人试图实现这一目标。
您只需要手动创建边框。 border-left: 1px solid #somecolour; 与右、上和下相同。如果您不确定如何重现嵌入效果，请截取设置为嵌入的边框的屏幕截图，并使用相同的颜色。然后从那里移动。
是的，你是对的。当我读回我的问题时，它来了，我回答了我自己的问题。脑子放个屁。

标签： html css border insets

【解决方案1】：

我不认为您可以按照我提到的方式控制它，但可以肯定的是，您可以控制每个边框的单独颜色：

#myElement{
  border-style: solid;
  border-width: 1px;
  border-top-color: black;
  border-left-color: black;
  border-right-color: white;
  border-bottom-color: white;
}

【讨论】：

确实如此。 +1 花时间回答自己，因为我们都有自己的愚蠢情节，而且我们并不总是能够自己找到明显的解决方案。

【解决方案2】：

如果你想对内嵌边框的所有边使用相同的颜色，试试这个，我用过并且效果很好。

border-style: solid inset solid solid;

【讨论】：