一、首先，outline是個很牛的東西
1. border近親
outline和border是近親，為什么這么講呢？首先，都是給元素外面套框框的；其次，支持的屬性值幾乎都是一樣的，例如，outline-style和border-style值dotted, dashed, solid, ...之類的，一些語法也幾乎一樣。如果這都不算近親，你讓絕對定位和浮動何言以對。

2. IE8+支持
outline嚴格來講屬于CSS3屬性，但是IE8+瀏覽器就支持了。外掛一句，IE9+瀏覽器的outline還支持invert，專門針對outline-color. 所以，如果你的項目不用管IE6/IE7瀏覽器，可以把outline掛在心中，有時候說不定會幫忙。

3. 不占據空間
默認的盒模型下，假設元素100*100像素，我們給元素設置border:10px solid，則實際該元素占據的尺寸至少就是120*120像素，元素的偏移、布局啊什么的，就需要多多思量。但是，outline不一樣，你哪怕outline:100px solid，元素占據的尺寸還是100*100像素。這種行為表現，與transform以及box-shadow等CSS3屬性很類似，雖然外形豐滿了，但是，占據的真實空間沒有影響。于是，我們在實現一些交互效果的時候，例如hover變化，我們就可以專注于效果本身，而不用被布局所左右，是很棒的體驗。

4. 直角！圓角？
正好承上啟下一下。
二、outline的直角與圓角

現有此效果一枚：

一排60*60像素的直角圖片，選中的圖片外框2像素帶圓角高亮。瀏覽器兼容要求，IE9+以及其他現代瀏覽器。

一般而言，我們的第一反應是使用border + border-radius。但是，有個問題，就是，這里的外部高亮邊框效果是外擴的，要知道，border是會增加元素的尺寸的，于是，為了我們的完美對齊效果，還需要對選中元素做重定位，上下左右的margin值都需要改變。我丟，想想就煩！

像這種UI表現，天生就是outline干的事情。于是，我們大手一揮：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表