CSS边框角度问题

Question

我正在创建一个有4种不同颜色边框的菜单。在Safari 5中查看时，左右边框从上到下排列，框周围没有角度。在FF 4中查看时，在边框底部和边框右侧元素处有一个边框角度。这使得菜单在不同的浏览器中看起来不同。下面是菜单项的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的长方体阴影，并指定它们“下降”的方向。玩起来会很有趣的。