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

相关文章

来自专栏Material Design组件

Human Interface Guidelines —— Page Controls

1155
来自专栏HTML5学堂

HTML5项目开发备忘录

HTML5学堂:良好的项目开发,从缜密的分析与计划开始,充分的项目开发准备能够让之后的问题降低到最少,让我们的整体开发效率提升不少。精心准备了关于项目开发的相关...

3705
来自专栏Esofar 开发日记

SuperMap iClient for JavaScript 新手入门

地理信息系统(英语:Geographic Information System,缩写:GIS)是一门综合性学科,结合地理学与地图学,已经广泛的应用在不同的领域,...

1803
来自专栏张善友的专栏

The jQuery UI CSS Framework

jQuery UI是 jquery官方推出的配合jquery使用的用户界面组件集合!包含了许多的界面操作功能,如我们常用的表格排序,拖拽,TAB选项卡,滚动条,...

1996
来自专栏破晓之歌

vue开源项目 原

优点:时间选择器配色舒适,进度条样式有虚线形式,步骤条更清晰相比有创新。表单字段点击后文字会上浮

6313
来自专栏walterlv - 吕毅的博客

WPF 应用完全模拟 UWP 的标题栏按钮

发布于 2018-08-04 09:35 更新于 2018-08...

622
来自专栏数据小魔方

office颜色配置技巧与自定义颜色主题

上一篇给大家介绍了基础的色彩知识,今天要跟大家简单介绍一下office(office系列所有套件的调色板是通用的)办公软件的内置色板的使用技巧以及如何自定义颜色...

3597
来自专栏吴老师移动开发

【iOS开发】UITableView优化

移动开发中,任何一个应用都或多或少的有列表的存在,列表的上下滑动直接关系到用户体验。如果处理不好,就会使得列表滑动起来有明显的卡顿效果。所以对列表的优化,让它更...

981
来自专栏Coco的专栏

【前端性能】高性能滚动 scroll 及页面渲染优化

2437
来自专栏前端说吧

PS-前端切图教程(切jpg图和切png图)

5655

扫码关注云+社区