border的transparent与rgba（0）的区别是什么？
在用after和before做一个小的tips箭头的时候，发现一个很蛋疼的问题，boeder写成transparent和写成rgb（x,x,x,0），在webkit下无区别，在moz下表现明显不同，transparent颜色会深很多，困惑中，有答案的兄弟麻烦给个答案…..下面是实例 1.transparent
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin:0;
padding:0;
}
.tips{
width:auto;
border:#e8e8e8 1px solid;
background:#fff;
position:absolute;
z-index: 9999;
}
.tips::after,.tips::before{
display:block;
content: "";
width:0;
height:0;
position:absolute;
left:13px;
border: solid transparent;
top:100%;
}
.tips-b::before{
border-color: transparent;
border-top-color:rgba(232, 232, 232,1);
border-width:7px;
margin-left:-3px;
z-index: 1;
}
.tips-b::after{
border-color: transparent;
border-top-color:rgba(255, 255, 255,1);
border-width:6px;
margin-left:-2px;
z-index: 2;
}
</style>
</head>
<body >
<div class="tips tips-b" style="width:100px; height:50px; top:100px; left:50px;"></div>
</body>
</html>
提示：你可以先修改部分代码再运行。
2.rgba
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin:0;
padding:0;
}
.tips{
width:auto;
border:#e8e8e8 1px solid;
background:#fff;
position:absolute;
z-index: 9999;
}
.tips::after,.tips::before{
display:block;
content: "";
width:0;
height:0;
position:absolute;
left:13px;
border: solid transparent;
top:100%;
}
.tips-b::before{
border-color: rgba(232, 232, 232, 0);
border-top-color:rgba(232, 232, 232,1);
border-width:7px;
margin-left:-3px;
z-index: 1;
}
.tips-b::after{
border-color: rgba(255, 255, 255, 0);
border-top-color:rgba(255, 255, 255,1);
border-width:6px;
margin-left:-2px;
z-index: 2;
}
</style>
</head>
<body >
<div class="tips tips-b" style="width:100px; height:50px; top:100px; left:50px;"></div>
</body>
</html>
提示：你可以先修改部分代码再运行。
腾讯云开发者
