深入淺析border和outline區(qū)別
發(fā)布時(shí)間：2016-07-04 17:21:33 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了深入淺析border和outline區(qū)別的相關(guān)資料,需要的朋友可以參考下
border支持box-sizing: border-box，當(dāng)有邊距時(shí)，是新增了邊框后在按照以前的邊距處理
outline不支持box-sizing: border-box;先處理邊距，后加輪廓，有點(diǎn)類似縮放（transform: scale(1.2);）無論輪廓大小樣式不影響布局。
outline 與 border 的區(qū)別小結(jié)
border 可應(yīng)用于幾乎所有有形的html元素，而 outline 是針對(duì)鏈接、表單控件和ImageMap等元素設(shè)計(jì)。從而另一個(gè)區(qū)別也可以推理出，那就是： outline 的效果將隨元素的 focus 而自動(dòng)出現(xiàn)，相應(yīng)的由 blur 而自動(dòng)消失。這些都是瀏覽器的默認(rèn)行為，無需JavaScript配合CSS來控制。
相關(guān)文章
使用CSS的border屬性構(gòu)建變形邊框的方法總結(jié)
border是最常用的用來制作各種各樣div邊框的CSS屬性,這里我們整理了使用CSS的border屬性構(gòu)建變形邊框的方法總結(jié),最主要的還是基于三角形的一些圖形變換:2016-06-23- 用CSS3的border-radius屬性來制作圓角邊框相當(dāng)順手,然而瀏覽器的兼容問題并不是太好處理,這里我們就來總結(jié)一下border-radius以外的CSS圓角邊框制作方法.2016-06-02
實(shí)例講解CSS3中的border-radius屬性
這篇文章主要介紹了實(shí)例講解CSS3中的border-radius屬性,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-18- 這篇文章主要介紹了詳解CSS3中border-image的使用,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-18
- 這篇文章主要介紹了CSS3使用border-radius屬性制作圓角，并附上示例代碼，推薦給有相同需求的小伙伴。2014-12-22
使用CSS實(shí)現(xiàn)outline切換的動(dòng)畫效果
這篇文章主要介紹了使用CSS實(shí)現(xiàn)outline切換的動(dòng)畫效果,作者展示了一個(gè)應(yīng)用于注冊(cè)框中的方框自動(dòng)切換位置的例子,需要的朋友可以參考下2015-06-24- 默認(rèn)情況下，用戶點(diǎn)擊某個(gè)鏈接后，這個(gè)鏈接的周圍會(huì)有一圈虛線來標(biāo)識(shí)。很多Web設(shè)計(jì)師不喜歡這個(gè)虛線，通常都會(huì)用CSS來去掉。2010-03-15
去掉點(diǎn)擊鏈接時(shí)周圍的虛線框outline屬性
以下是解決方案： 方法一： 在IE下是使用html屬性：hideFoucs，在HTML標(biāo)簽中加上hidefocus=”true” 屬性即可，但這個(gè)屬性是IE私有的，F(xiàn)irefox是不認(rèn)的。 &2009-06-19CSS教程:text-indent隱藏文字出現(xiàn)虛線框outline-CSS教程-網(wǎng)頁制作-網(wǎng)頁
鏈接用圖片做背景，text-indent:-9999px; 隱藏文字，此效果在 IE 中是正常的，但在 Firefox 里，鼠標(biāo)點(diǎn)擊該鏈接時(shí)，虛線框卻會(huì)包住被縮進(jìn)的文字，結(jié)果顯示為虛線框 N2008-10-17