CSS＆amp;少 - 渐变＆amp;边境问题

Question

<div class="menu_wrapper">
<div class="menu_entry"><p class="text_menu_entry">{$uiStrings['ui_text_view']}</p></div>
<div class="menu_entry"><p class="text_menu_entry">{$uiStrings['ui_text_add']}</p></div>
</div>

http://jsfiddle.net/z8J9q/1/

所有CSS都在jsfiddle ...

为什么这个代码在悬停时，使1个边框，底部，100％着色。像一条线......

您还可以查看我的项目：http://alpt.twomini.com/

点击右栏中的＆＃34; Fleet＆＃34;，MENU AREA。将鼠标悬停在菜单项上......

我感谢你们，你们的时间，耐心和答案。

谢谢。

Answer 1

将此规则添加到您的：悬停定义

background-repeat: no-repeat;

边框位于元素内部。由于您将其设置为半透明且背景设置为默认重复，因此您会看到渐变使其“透明度降低”

Answer 2

您可以使用背景剪辑： DEMO

 background-clip:padding-box;/* do not draw background under borders */

如果需要，添加前缀。您可以查看使用情况并支持 here