CSS：两个颜色边框 [英] CSS: two color borders

问题描述

客户需要两个彩色边框以浮雕外观。我可以在一个元素上这样做吗？我希望避免堆叠具有单个边框的两个DOM元素。

Client wants two color borders for an embossed look. Can I do this on one element? I was hoping to avoid stacking two DOM elements with individual borders.

推荐答案

是的：使用 / code> property;它作为您的边界之外的第二个边界。当心，你，它可以以一种摇滚风格与边缘，paddings和阴影交互。在某些浏览器中，您可能还必须使用浏览器特定的前缀;为了确保它接受它： -webkit-outline 等（尽管WebKit特别不需要这个）。

Yep: Use the outline property; it acts as a second border outside of your border. Beware, tho', it can interact in a wonky fashion with margins, paddings and drop-shadows. In some browsers you might have to use a browser-specific prefix as well; in order to make sure it picks up on it: -webkit-outline and the like (although WebKit in particular doesn't require this).

这也可以在你想要抛弃某些浏览器的轮廓的情况下（例如，如果你想把大纲和一个阴影组合在一起的情况下;在WebKit的大纲是在里面的阴影;在FireFox它在外面，所以 -moz-outline：0 是有用的，以确保你不会得到一个粗糙的线围绕你漂亮的CSS阴影）

This can also be useful in the case where you want to jettison the outline for certain browsers (such as is the case if you want to combine the outline with a drop shadow; in WebKit the outline is inside of the shadow; in FireFox it is outside, so -moz-outline: 0 is useful to ensure that you don't get a gnarly line around your beautiful CSS drop shadow).

.someclass {
  border: 1px solid blue;
  outline: 1px solid darkblue;
}

编辑：有人说c $ c> outline 没有很好地与IE&虽然这是真的;支持IE< 8真的不是你应该做的事。

Some people have remarked that outline doesn't jive well with IE < 8. While this is true; supporting IE < 8 really isn't something you should be doing.

这篇关于CSS：两个颜色边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！