我正在创建一个带有 4 种不同颜色边框的菜单。在 Safari 5 中查看时,左右边框从上到下,框周围没有任何 Angular 。在 FF 4 中查看时,下边框和右边框元素处存在边框 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; }
请指教。谢谢
最佳答案
这是由浏览器决定边界线在哪里开始和在哪里结束造成的。不幸的是,这个问题没有解决办法。最好的选择是选择足够相似的边框颜色,这样它们就不会太突出。
另一个需要现代浏览器/CSS3 支持的选项是在元素上使用框阴影。例如:
box-shadow: inset 1px 1px 1px rgba(255,0,0,1),
inset 1px -1px 1px rgba(0,255,0,1);
您可以添加多层仅 1px 宽度的框阴影,并指定它们“下降”的方向。玩起来会很有趣。
关于CSS边框 Angular 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5490630/