拾人牙慧:不同瀏覽器如何渲染不同border-style值
本文的一些測試結(jié)果不是出自我手，來自：How Do Browsers Render the Different CSS Border Style Values?
以下是測試使用的代碼：
- .box {
- width: 50px;
- height: 50px;
- border-width: 5px;
- border-color: #444; /* 后面會改成 "pink" 調(diào)個休 */
- border-style: dotted; /* dashed, double, groove, ridge, inset, outset */
- }
Value: dotted
各個瀏覽器對比結(jié)果如下：
上面的對比結(jié)果直接把IE6給無視了（下同），唉，人家生活在American，國情不一樣哈。IE7~IE8鉆石形狀，IE10全部可愛圓點(diǎn)，其他瀏覽器，自己看圖吧。
哪個是正統(tǒng)？
IE10的渲染已經(jīng)接近規(guī)范的描述。圓角渲染最靠譜的應(yīng)該是FireFox瀏覽器。
Value: dashed
所有瀏覽器都是方條條，不過長度啊，空白間距啊都有挺標(biāo)新立異的。
哪個是正統(tǒng)？
根據(jù)規(guī)范定義，貌似哪個都對。如果您非要一大堆螃蟹里挑出個陽澄湖大閘蟹的話，F(xiàn)ireFox那個丑陋的鳥樣更準(zhǔn)確些。
Value: double
考驗(yàn)大家眼力的時候到了，找出其中不循規(guī)蹈矩的那一個。哦呵呵，恭喜你，找對了，就是IE10版本的邊框，顏色淡了那么一點(diǎn)點(diǎn)。
哪個是正統(tǒng)？
雖然真理往往掌握在少數(shù)人手中，但是，常識往往掌握在大多數(shù)人手中。我就不說什么了。
Value: groove
groove是凹槽的意思。不同瀏覽器下groove的長相就像女人一樣，花樣百變。我再一次就不說什么了。
哪個是正統(tǒng)？
根據(jù)測試者的認(rèn)識，沒有一個是真正正確的，可能作者稍微摳了一點(diǎn)，顏色的變化應(yīng)該是“曲線式”的，但是，上面沒有一個是這樣的。
Value: ridge
ridge是山脊的意思。從效果來看，ridge和groove真稱得上“奸夫淫婦”的美名哈。
哪個是正統(tǒng)？
雖然長相不一，其實(shí)大家都是正確的。只不過都不是100% OK的那種。Firefox, Safari, 和Chrome應(yīng)該是最準(zhǔn)確的。
Value: inset
IE7和IE8的內(nèi)陷的陰影真是好陰暗哦，果然應(yīng)了那句話，相由心生。
哪個是正統(tǒng)？
除了IE7和IE8，其他瀏覽器的邊框都是可以豎大拇指滴。
Value: outset
IE好像都蠻黑的。但是，基本上還都過得去。Safari和Chrome的相貌是最好的。
哪個是正統(tǒng)？
不管你信不信，反正我是信了。IE7和IE8要比其他的來的更準(zhǔn)確。恩恩，其他瀏覽器最大的問題在于就像個小胸的美女，難以區(qū)分前胸和后背。”inset”和”outset”長得過于類似。IE10尤其是個平胸女王，很容易讓男朋友以為晚上都是趴著睡的。
原文鏈接：http://itindex.net/detail/25308-%E6%B5%8F%E8%A7%88%E5%99%A8-%E6%B8%B2%E6%9F%93-border
