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宽度的框阴影图层，并指定它们“拖放”的方向。可以很有趣。

CSS边界角度问题

1 个答案: