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 条评论
登录 后参与评论

相关文章

来自专栏NewbieWeb

像素差逐帧动画

首先这是个从来没有在生产环境中使用的技术,而且对于交互较简单的展示动画等,可以使用视频直接替换(虽然视频也有很多兼容性问题);

672
来自专栏marsggbo

Python数据增强(data augmentation)库--Augmentor 使用介绍

Augmentor 使用介绍 原图 ? 1.random_distortion(probability, grid_height, grid_width, ma...

4188
来自专栏AhDung

【C#】无损转换Image为Icon

此法的问题是,如果图像是透明背景,那么得到的Icon的边缘就是毛糙的,像是先垫了一层背景色然后再去色的效果,很不如人意,用过的朋友都知道。尚未研究是bmp.Ge...

873
来自专栏数据小魔方

rept——一个可以一键成图的神奇函数!

今天想跟大家分享一个特别有趣的函数——rept函数。 ▼ 这个函数,就如同它的名字一样,具有重复显示字符的功能。 如图所示,在A57单元格中有一个数字1,如果我...

3355
来自专栏IMWeb前端团队

html结构的拆与合

写下这篇标题的时候,脑海中突然闪过《三国演义》的纲领——天下大势分久必合合久必分。也许html结构也如是,总是在拆拆合合中演绎着一段段神奇的故事。 玩过七巧板的...

1869
来自专栏IMWeb前端团队

CSS StickyFooter——当内容不足一屏时footer紧贴底部

一般来说我们的footer是跟着内容走的,所以当内容较少不足一屏的时候,footer也会跟着内容往上走,导致下面一段空白。所以这里我们来探讨下当内容不足一屏时f...

1777
来自专栏编程语言

Python:pygame的初步使用(pygame.draw)(二)

722
来自专栏数据小魔方

think-cell chart系列15——蝴蝶图

今天跟大家分享think-cell chart系列的第15篇——蝴蝶图。 ? 当然think-cell chart中是无法直接制作蝴蝶图的,需要通过一对开口方向...

3794
来自专栏WindCoder

用CSS让头像动起来

不知之前什么时候起,喜欢是不是玩头像的特效。现在换了主题,头像不会动了,反而有点不太习惯,于是就又找了个常用的出来。原本以为那个把头像变成圆形并可以旋转的特效会...

1041
来自专栏CDA数据分析师

技能 | 如何使用Python将文本转为图片

有时候,我们需要将文本转换为图片,比如发长微博,或者不想让人轻易复制我们的文本内容等时候。目前类似的工具已经有了不少,不过我觉得用得都不是很趁手,于是便自己尝试...

2997

扫码关注云+社区