7.2 双斜角横线菜单

在这个案例中，将制作如图1所示的菜单。鼠标指针经过某个菜单项时，显示灰色背景色，同时在上下两侧各产生一条带有斜角的横线。

该实例文件位于网页学习网CSS教程资源中的“第7章\02\bevel-navi.htm”。

图1 双斜角横线菜单效果

在这个案例中，需要重点考虑的是这个带有斜角的横线是如何产生的。

一、基本设置

本案例和上一个案例相同的HTML结构如下。

XML/HTML 代码复制内容到剪贴板

对于#menu容器的设置如下。lodidance.com

折叠CSS 代码复制内容到剪贴板

在对#menu的设置中，宽度使用的足相对单位em，而不像上一个例子，使用像素作为单位，代码如下。

折叠CSS 代码复制内容到剪贴板

使用相对单位的优势是，当访问者在浏览器中调整了文字的大小，#menu容器的大小可以自动调整，以适应文字大小的变化。

此外，还为#menu容器设置了1个像素宽的灰色的边框，代码为：

折叠CSS 代码复制内容到剪贴板

二、菜单项设置

菜单项没有鼠标指针经过时效果的设置方法与上一节的案例相似，代码如下。

折叠CSS 代码复制内容到剪贴板

与上个案例的不同之处在于，这里为了使菜单项的文字之间有一定空白，并且使文字在菜单项中竖直居中，没有采用padding来实现，而是用了line-height属性。当line-height属性设置为1.4em时，文字的上下会各产生0.2em的空白。

注意：这里不能使用height属性。如果使用height属性代替line-height属性。可以看到，文字将在竖直方向靠上对齐，而不是竖直居中了，这不是所期望的效果。

接下来，就要实现在鼠标指针经过时产生的背景色和边框了。在前面正常状态下的CSS代码中有如下一行设置。

折叠CSS 代码复制内容到剪贴板

对鼠标指针经过效果设置如下。

折叠CSS 代码复制内容到剪贴板

可以看出，这个边框在鼠标指针未经过之前就已经存在了，只是和背景色相同，所以看不出是边框。而当鼠标指针经过时，边框的颜色发生改变，边框就显现出来了。

思考：最后请读者思考一下，为什么这里显示出的上下两条边框是斜角的，而7.1节案例中的左右两条边框不是这样的呢？

答案是，7.1节的案例中设置了左右两条边框宽为4px，上下边框为O；而在这个案例中，虽然左右边框在鼠标指针经过和不经过时的颜色不同，但实际上它们是存在宽度的，因此在水平和竖直的边框接角的位置，就产生了斜角。