拾人牙慧:不同瀏覽器如何渲染不同border-style值
本文的一些測試結果不是出自我手，來自：How Do Browsers Render the Different CSS Border Style Values?
以下是測試使用的代碼：
- .box {
- width: 50px;
- height: 50px;
- border-width: 5px;
- border-color: #444; /* 后面會改成 "pink" 調個休 */
- border-style: dotted; /* dashed, double, groove, ridge, inset, outset */
- }
Value: dotted
各個瀏覽器對比結果如下：
上面的對比結果直接把IE6給無視了（下同），唉，人家生活在American，國情不一樣哈。IE7~IE8鉆石形狀，IE10全部可愛圓點，其他瀏覽器，自己看圖吧。
哪個是正統？
IE10的渲染已經接近規范的描述。圓角渲染最靠譜的應該是FireFox瀏覽器。
Value: dashed
所有瀏覽器都是方條條，不過長度啊，空白間距啊都有挺標新立異的。
哪個是正統？
根據規范定義，貌似哪個都對。如果您非要一大堆螃蟹里挑出個陽澄湖大閘蟹的話，FireFox那個丑陋的鳥樣更準確些。
Value: double
考驗大家眼力的時候到了，找出其中不循規蹈矩的那一個。哦呵呵，恭喜你，找對了，就是IE10版本的邊框，顏色淡了那么一點點。
哪個是正統？
雖然真理往往掌握在少數人手中，但是，常識往往掌握在大多數人手中。我就不說什么了。
Value: groove
groove是凹槽的意思。不同瀏覽器下groove的長相就像女人一樣，花樣百變。我再一次就不說什么了。
哪個是正統？
根據測試者的認識，沒有一個是真正正確的，可能作者稍微摳了一點，顏色的變化應該是“曲線式”的，但是，上面沒有一個是這樣的。
Value: ridge
ridge是山脊的意思。從效果來看，ridge和groove真稱得上“奸夫淫婦”的美名哈。
哪個是正統？
雖然長相不一，其實大家都是正確的。只不過都不是100% OK的那種。Firefox, Safari, 和Chrome應該是最準確的。
Value: inset
IE7和IE8的內陷的陰影真是好陰暗哦，果然應了那句話，相由心生。
哪個是正統？
除了IE7和IE8，其他瀏覽器的邊框都是可以豎大拇指滴。
Value: outset
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
