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>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术墨客

React新特性——Protals与Error Boundaries

在React 16.x 新增了一个名为“Protals”的特性,直接按照字面意思翻译实在不靠谱。在描述这个特性时,我们还是用官方的英文单词来指定它。Portal...

1184
来自专栏玄魂工作室

Python黑客编程2 入门demo--zip暴力破解

上一篇文章,我们在Kali Linux中搭建了基本的Python开发环境,本篇文章为了拉近Python和大家的距离,我们写一个暴力破解zip包密码的小程序。这个...

3457
来自专栏技术墨客

React JSX语法与组件

上面这段有趣的例子既不是标准的JavaScript也不是HTML,它就是我们接下来要介绍的JSX的语法,是一种JavaScript的扩展。在React中使用JS...

1305
来自专栏Python爬虫实战

秒懂python编程中的if __name__ == '__main__'

相信初学者在学习Python的过程中,不可避免的总会遇到if __name__ == '__main__'语句,虽然一直知道它的作用,但是可能一直比较模糊,今天...

651
来自专栏月牙寂

docker源码分析(5)---daemon

第一时间获取文章,可以关注本人公众号 月牙寂道长 yueyajidaozhang

2968
来自专栏木子墨的前端日常

react-navigation 使用笔记 持续更新中

React-Navigation是目前React-Native官方推荐的导航组件,代替了原用的Navigator。最近开始接触,做个笔记

594
来自专栏小白鼠

Ionic3 自定义指令

组件的概念比较大,本文讲解的是属性指令和结构指令的创建和使用,Angular官方文档

1043
来自专栏liulun

Nim教程【四】

这是国内第一个关于Nim的系列教程 先说废话 Screenshot (2).png 高雅的Nim Screenshot (3).png 方法 Screens...

20010
来自专栏指尖下的Android

JNI之路径初探---1

首先要明白,什么是JNI,我们做安卓开发为什么要学习JNI,学习JNI能干嘛? JNI全称Java Native Interface (Java本地接口) ...

761
来自专栏Google Dart

AngularDart4.0 指南- 用户输入 顶

用户的操作,如点击链接,按下按钮,输入文字引发DOM事件。 本页说明如何使用Angular事件绑定语法将这些事件绑定到组件事件处理程序。

1100

扫码关注云+社区