CSS边框 Angular 问题

Question

我正在创建一个具有 4 种不同颜色边框的菜单。在 Safari 5 中查看时，左右边框从上到下，框周围没有任何 Angular 。在 FF 4 中查看时，在 border-bottom 和 border-right 元素处有一个边框 Angular 。这使得菜单在不同的浏览器中看起来不同。这是菜单项的 CSS:

ul#mainnav a {
   display: block;
   text-decoration: none;
   color: #b0c9da;
   padding: 7px 7px 7px 14px;
   border-bottom: 1px solid #01304f;
   border-top: 1px solid #1a74af;
   border-right: 1px solid #fff;
   border-left: 1px solid #246792; }

请指教。谢谢

Answer 1

这是由浏览器决定边界线的起点和终点造成的。不幸的是，没有解决办法。最好的选择是选择足够相似的边框颜色，以免它们过于突出。

需要现代浏览器/CSS3 支持的另一种选择是在元素上使用框阴影。例如:

box-shadow: inset 1px 1px 1px rgba(255,0,0,1), 
            inset 1px -1px 1px rgba(0,255,0,1);

您可以添加多层只有 1px 宽度的框阴影，并指定它们“下降”的方向。玩起来会很有趣。