css属性transparent有时候并不是透明的

两天前我发了个求助,今天终于在朋友的帮助下找到了答案,关于transparent以及rgba(0,0,0,0),在webkit与没有抗锯齿的浏览器下对border渲染正常,但是在有抗锯齿渲染的浏览器下(ff,ie9)明显就不正常(winXP)。

首先看一个例子

<!DOCTYPE html>

<html lang="en">

<head>

<meta name="keywords" content="前端开发,CSS,HTML,XHTML,JS" />

<meta name="description" content="专注前端技术博客 caihong.cc" />

<title>WEB前端开发 | 闪亮于WEB前端的彩虹</title>

<style>

*{

margin:0;

padding:0;

}

.mold{

width:100px;

height:100px;

border-top: 100px solid transparent;

border-left: 100px solid #eee;

border-bottom: 100px solid transparent;

border-right: 100px solid #eee;

}

</style>

</head>

<body >

<div class="mold"></div>

</body>

</html>

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

这个例子在webkit下两条透明的表框表现是没任何问题的,但是在FF下面,border与border的那个对角线位置,明显多出了一条黑线,如图。

因为firefox的抗锯齿处理会让border之间渐变过渡,也就是说从rgba(238,238,238,1)到rgba(0,0,0,0)进行渐变处理,那条黑线恰好是两个颜色之间的中间色。

所以为了让浏览器渲染一样,以后大家写border透明色的时候,必须写相邻border相同颜色的透明,比如上面的例子:

  1. border-top: 100px solid transparent;
  2. border-left: 100px solid #eee;

就要改成

  1. border-top: 100px solid rgba(238,238,238,0);
  2. border-left: 100px solid #eee;

也就是说,在某些时候,border的透明处理不要简单的写为transparent。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏你不就像风一样

MongoDB非关系型数据库开发手册

NoSQL,指的是非关系型的数据库。NoSQL有时也称作Not Only SQL的缩写,是对不同于传统的关系型数据库的数据库管理系统的统称。

792
来自专栏编程

前端面试三 新的一周

哈哈哈 1. 对WEB标准以及W3C的理解与认识? 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下...

2240
来自专栏Android群英传

Android Native Crash 收集

本文是『张涛的NDK之旅』,本来很早以前就有很多读者希望我能写一些关于MDK的文章,但是由于我本身对NDK不熟悉,所以找来了同事张涛的文章。欢迎大家关注他的博客...

531
来自专栏代码GG之家

google 进入分屏后在横屏模式按home键界面错乱( 四)

google 进入分屏后在横屏模式按home键界面错乱( 四) 你确定你了解分屏的整个流程? ? 代码阅读,请到此处http://androidxref.com...

1908
来自专栏MasiMaro 的技术博文

Windows服务框架与服务的编写

从NT内核开始,服务程序已经变为一种非常重要的系统进程,一般的驻守进程和普通的程序必须在桌面登录的情况下才能运行,而许多系统的基础程序必须在用户登录桌面之前就要...

481
来自专栏斑斓

Redux框架reducer对状态的处理

前言 在react+redux项目里,关于reducer处理state的方式,在redux官方文档中有这样一段描述: 不要修改 state。 使用 Objec...

3495
来自专栏AhDung

【C#】递归搜索指定目录下的指定项目(文件或目录)

---------------更新:201411201121---------------

612
来自专栏Python数据科学

Scrapy爬取二手房信息+可视化数据分析

本篇介绍一个scrapy的实战爬虫项目,并对爬取信息进行简单的数据分析。目标是北京二手房信息,下面开始分析。

762
来自专栏Python攻城狮

Python网络爬虫(四)- XPath1.XPath2.XPath在python中的应用

XPath 即为XML路径语言(XML Path Language),它是一种用来确定XML文档中某部分位置的语言。它使用路径表达式来选取 XML 文档中的节点...

854
来自专栏腾讯IVWEB团队的专栏

通过ffi在Node.js中调用动态链接库(.so/.dll文件)

由于公司许多公共的后台服务已经有了非常成熟的C/C++编写的API,以供应用程序调用,node.js作为在公司内新兴的后台runtime在调用这些公共服务的时候...

7660

扫码关注云+社区