拾人牙慧:不同浏览器如何渲染不同border-style值

开发 前端
本文的一些测试结果不是出自我手,来自:How Do Browsers Render the Different CSS Border Style Values?

本文的一些测试结果不是出自我手,来自:How Do Browsers Render the Different CSS Border Style Values?

以下是测试使用的代码:

  1. .box { 
  2.     width50px
  3.     height50px
  4.     border-width5px
  5.     border-color#444/* 后面会改成 "pink" 调个休 */ 
  6.     border-styledotted/* dashed, double, groove, ridge, inset, outset */ 

Value: dotted

各个浏览器对比结果如下:

border-style不同属性值在不同浏览器下的渲染 张鑫旭-鑫空间-鑫生活

上面的对比结果直接把IE6给无视了(下同),唉,人家生活在American,国情不一样哈。IE7~IE8钻石形状,IE10全部可爱圆点,其他浏览器,自己看图吧。

哪个是正统?
IE10的渲染已经接近规范的描述。圆角渲染最靠谱的应该是FireFox浏览器。

Value: dashed

border-style不同属性值在不同浏览器下的渲染 张鑫旭-鑫空间-鑫生活

所有浏览器都是方条条,不过长度啊,空白间距啊都有挺标新立异的。

哪个是正统?
根据规范定义,貌似哪个都对。如果您非要一大堆螃蟹里挑出个阳澄湖大闸蟹的话,FireFox那个丑陋的鸟样更准确些。

Value: double

border-style不同属性值在不同浏览器下的渲染 张鑫旭-鑫空间-鑫生活

考验大家眼力的时候到了,找出其中不循规蹈矩的那一个。哦呵呵,恭喜你,找对了,就是IE10版本的边框,颜色淡了那么一点点。

哪个是正统?
虽然真理往往掌握在少数人手中,但是,常识往往掌握在大多数人手中。我就不说什么了。

Value: groove

border-style不同属性值在不同浏览器下的渲染 张鑫旭-鑫空间-鑫生活

groove是凹槽的意思。不同浏览器下groove的长相就像女人一样,花样百变。我再一次就不说什么了。

哪个是正统?
根据测试者的认识,没有一个是真正正确的,可能作者稍微抠了一点,颜色的变化应该是“曲线式”的,但是,上面没有一个是这样的。

Value: ridge

border-style不同属性值在不同浏览器下的渲染 张鑫旭-鑫空间-鑫生活

ridge是山脊的意思。从效果来看,ridgegroove真称得上“奸夫淫妇”的美名哈。

哪个是正统?
虽然长相不一,其实大家都是正确的。只不过都不是100% OK的那种。Firefox, Safari, 和Chrome应该是最准确的。

Value: inset

border-style不同属性值在不同浏览器下的渲染 张鑫旭-鑫空间-鑫生活

IE7和IE8的内陷的阴影真是好阴暗哦,果然应了那句话,相由心生。

哪个是正统?

除了IE7和IE8,其他浏览器的边框都是可以竖大拇指滴[[90052]]

Value: outset

border-style不同属性值在不同浏览器下的渲染 张鑫旭-鑫空间-鑫生活

IE好像都蛮黑的。但是,基本上还都过得去。Safari和Chrome的相貌是最好的。

哪个是正统?

不管你信不信,反正我是信了。IE7和IE8要比其他的来的更准确。恩恩,其他浏览器最大的问题在于就像个小胸的美女,难以区分前胸和后背。”inset”和”outset”长得过于类似。IE10尤其是个平胸女王,很容易让男朋友以为晚上都是趴着睡的。

原文链接:http://itindex.net/detail/25308-%E6%B5%8F%E8%A7%88%E5%99%A8-%E6%B8%B2%E6%9F%93-border

责任编辑:陈四芳 来源: 浏览器/渲染/
相关推荐

2013-08-27 12:42:42

浏览器

2017-12-05 10:44:50

浏览器页面加载

2013-11-18 14:42:53

浏览器渲染

2010-09-15 15:39:03

CSS hack

2012-06-07 16:07:13

HTML5

2020-11-06 15:20:45

浏览器前端架构

2013-11-20 13:47:43

浏览器渲染引擎

2011-07-04 10:45:03

2019-11-13 10:28:23

浏览器IEChrome

2020-11-17 08:07:29

存储类型浏览器

2009-05-21 14:22:24

浏览器共享收藏夹

2023-04-27 07:06:18

2013-05-23 16:01:56

浏览器

2013-06-14 13:56:29

浏览器渲染原理

2012-07-03 09:41:40

浏览器份额

2010-09-08 11:11:50

CSS样式CSS

2017-03-08 08:31:48

浏览器渲染路径

2022-08-30 09:01:11

浏览器渲染前端

2017-10-09 13:39:26

浏览器渲染服务器

2018-01-19 14:39:53

浏览器页面优化
点赞
收藏

51CTO技术栈公众号