2

我正在创建一个具有 4 种不同颜色边框的菜单。在 Safari 5 中查看时，左右边框从上到下排列，框周围没有任何角度。在 FF 4 中查看时，border-bottom 和border-right 元素有一个边框角。这使得菜单在不同的浏览器中看起来不同。这是菜单项的 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; }

请指教。谢谢

4

1 回答 1

4

这是由浏览器决定边界线从哪里开始以及在哪里结束造成的。不幸的是，没有解决方法。你最好的选择是选择足够相似的边框颜色，这样它们就不会那么突出。

另一个需要现代浏览器/CSS3 支持的选项是在元素上使用 box-shadow。例如：

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

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

于 2011-03-30T20:38:02.390 回答