两种颜色的边框

本文介绍了两种颜色的边框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

客户需要两个彩色边框以形成浮雕外观.我可以在一个元素上执行此操作吗?我希望避免堆叠两个带有单独边框的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.

推荐答案

是的:使用outline属性；它充当边界之外的第二个边界.请注意，它可能会以奇怪的方式与边距，填充和阴影一起交互.在某些浏览器中，您可能还必须使用特定于浏览器的前缀.为了确保它能被拾取:-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; }

编辑:有些人指出outline与IE< 8.这是事实；支持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.