Question

这是我的布局菜单：

http://gyazo.com/da1f1954a34694facaaab8ce6c92b267

您能看到每个菜单项之间的黑白低不透明度线吗？如何使它们完全按照这个尺寸制作？你也可以在每个菜单项中看到空间的空间，我该怎么做？

由于

Answer 1

1）对于边框使用rgba：

your_li_element_selector {
    border-right: 1px solid rgba(255, 255, 255, 0.5); /* white border with opacity 50% */
    border-left: 1px solid rgba(0, 0, 0, 0.5); /* black border with opacity 50% */
}

隐藏第一个菜单项的左边框：

your_li_element_selector:first-child {
    border-left: 0;
}

隐藏最后一个菜单项的右边框：

your_li_element_selector:last-child {
    border-right: 0;
}

2）对于空间使用margin元素和padding元素属性{/ 1}}。

Answer 2

您可以使用RGBA向左边框和右边框设置，并向下更改不透明度。第一个孩子和最后一个孩子删除额外的边界。下行是上面的东西在一些较老的浏览器中不起作用。正如@dev所说，最合适的可能是使用图像。

使用RGBA，第一胎和最后一胎的示例：http://jsfiddle.net/Ra9NT/

每个项目之间的菜单行

2 个答案: