CSS透明边框问题在Firefox 4？ [英] CSS Transparent Border Problem In Firefox 4?
问题描述
我想为工具提示创建一个纯CSS三角形。下面是代码：
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8/>
< title>无标题文档< / title>
< style>
.arrow {
border：50px solid;
border-color：#eee透明透明;
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中看到的，它有一个边框。
如何在FF4中实现纯CSS三角形，没有可见的边框？另外，我需要其他3种颜色是透明的，因为这个三角形会重叠一些元素。
if 透明不适用于您，那么使用 rgba 可能就是这样。
写：
.arrow {
border-color：#eee rgba（255,255,255,0）rgba（255,255,255,0 ）rgba（255,255,255,0）;
}
I'm trying to create a pure CSS triangle for a tooltip. All browsers looks fine except for the latest Firefox 4. Here's the code:
<!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 Screenshot:
Other Browsers Screenshot:
As you can see in Firefox 4, it has something like a border. Is it a Firefox bug or this is really the behavior?
How can I achieve a pure CSS triangle without that visible border in FF4? Also, I need the other 3 colors to be transparent because this triangle will overlap some elements.
if transparent is not work for you then use rgba may be that's work.
Write:
.arrow {
border-color:#eee rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0);
}
这篇关于CSS透明边框问题在Firefox 4？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
