CSS 4中的透明边框问题?

我正在尝试为工具提示创建一个纯CSS三角形。所有浏览器看起来都很好,除了最新的Firefox 4.以下是代码
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8" />
<title>Untitled Document</title>
<style>
.arrow {
    border:50px solid;
    border-color:#eee transparent transparent transparent;
    display:block;
    height:0;
    width:0;
    top:50%;
    right:50%;
    position:absolute;
}
</style>
</head>
<body>
<div style="border:1px solid #000; height:400px; width:400px; margin:50px auto; position:relative;">
    <span class="arrow"></span>
</div>
</body>
</html>

Firefox 4屏幕截图:

其他浏览器截图:

正如你在Firefox 4中看到的,它有一个像边框的东西。这是Firefox的错误还是真的是这样的行为?

如何在FF4中没有可见边界的CSS三角形?此外,我需要其他3种颜色是透明的,因为这个三角形将重叠一些元素。

解决方法

如果透明不适合你,那么使用rgba可能是这样的。

写:

.arrow {
    border-color:#eee rgba(255,255,0)  rgba(255,0);
}

相关文章

前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将...
前言 有些属性不是很常用,但是工作中遇到了,记录一下,方便学习。 1、text-indent text-indent 属性规...
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大...
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。 实现过程 书写css...
html代码 css代码 效果图
在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个...