資訊專(zhuān)欄INFORMATION COLUMN
摘要：中的屬性，我想凡是了解一點(diǎn)的都知道它是作用，可以在上找到對(duì)它的詳細(xì)介紹。看了這么多有意思的，那么對(duì)于邊框，你真的了解了嗎最近碰到一個(gè)有意思的樣式，讓我對(duì)于邊框有了很深刻的了解。
CSS 中的 border 屬性，我想凡是了解一點(diǎn) CSS 的都知道它是作用，可以在 MDN 上找到對(duì)它的詳細(xì)介紹。
border簡(jiǎn)單來(lái)說(shuō)，就是我們常用的邊框，一個(gè)非?；A(chǔ)的用法，就是
border: 1px solid black; // 等價(jià)于 border-width: 1px; border-style: solid; border-color: black;
下面是演示的效果：
當(dāng)然還可以定義很多奇形怪狀的邊框類(lèi)型，比如圓角(radius，可能兼容性不是很好)，橢圓(其實(shí)只要懂了橢圓，邊框就可以隨意繪制了)。
border 1px solid black; border-radius: 50%;border-top,-right,-bottom,-left
看了這么多有意思的 DEMO，那么對(duì)于邊框，你真的了解了嗎？
最近碰到一個(gè)有意思的 CSS 樣式，讓我對(duì)于邊框有了很深刻的了解。平時(shí)我們用邊框，基本都要給邊框一個(gè)寬度，1px，偶爾2px，并沒(méi)有發(fā)現(xiàn)邊框與元素之間的關(guān)系，當(dāng)我們把 border-width換大一點(diǎn)的值，問(wèn)題就來(lái)了。
border: 20px solid gray;
并且，邊框是可以多帶帶設(shè)置 top，right，bottom，left 的值：
border: 20px solid gray; border-top-width: 40px; border-left-width: 40px;
邊框與邊框的交界處該如何來(lái)判斷呢？
了解這一點(diǎn)非常重要，如果你也發(fā)現(xiàn)了這個(gè)問(wèn)題，那么下面有意思的東西就來(lái)了：
border: 20px solid; border-top-color: black; border-right-color: red; border-bottom-color: gray; border-left-color: blue;
居然是內(nèi)頂點(diǎn)與外頂點(diǎn)的連線(xiàn)把邊框分開(kāi)了，如果把元素的 width 和 height 都設(shè)置成 0，再加一個(gè) radius：
width: 0; height: 0; border-radius: 50%;
前面 border-radius 的原理你也應(yīng)該懂了吧!
有關(guān)于 border-radius 的選取，可以看下 SF 上的這個(gè)提問(wèn) border-radius內(nèi)外半徑=<邊框?qū)挾葧r(shí)，盒子內(nèi)邊就成了直角怎么一回事。
用 border 實(shí)現(xiàn)箭頭知道了一些 border 的基本知識(shí)，我們就可以實(shí)現(xiàn)常見(jiàn)于對(duì)話(huà)框的箭頭，像下面這種：
這個(gè)需要借助于 CSS 中的透明 transparent 來(lái)實(shí)現(xiàn)，比如我們需要一個(gè)向右的箭頭，參考上面 width 和 height 為 0 時(shí)的例子，對(duì)應(yīng)的邊框大小 15px,0px,15px,30px，先看下面這個(gè)例子
border-width: 15px 0px 15px 30px; border-color: black gray; border-style: solid;
這個(gè)時(shí)候需要把 border-top 和 border-bottom 的顏色設(shè)置成透明，
border-color: transparent gray;
那么，對(duì)于的其他三個(gè)角度的箭頭也可以以同樣的方式設(shè)計(jì)出來(lái)：
總結(jié)看了這篇文章，是不是覺(jué)得 border 的功能非常強(qiáng)大，其實(shí)我們常見(jiàn)的一些氣泡和形狀都可以用 border 來(lái)實(shí)現(xiàn)，哈哈，非常鄙視那些用圖片的同學(xué)。共勉。
參考CSS Refreshers: Borders
歡迎來(lái)我的博客交流。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111660.html
摘要：中的屬性，我想凡是了解一點(diǎn)的都知道它是作用，可以在上找到對(duì)它的詳細(xì)介紹?？戳诉@么多有意思的，那么對(duì)于邊框，你真的了解了嗎最近碰到一個(gè)有意思的樣式，讓我對(duì)于邊框有了很深刻的了解。 CSS 中的 border 屬性，我想凡是了解一點(diǎn) CSS 的都知道它是作用，可以在 MDN 上找到對(duì)它的詳細(xì)介紹。 border 簡(jiǎn)單來(lái)說(shuō)，就是我們常用的邊框，一個(gè)非?；A(chǔ)的用法，就是 border: 1px...
摘要：盒模型的組成大家肯定都懂，由里向外盒模型是有兩種標(biāo)準(zhǔn)的，一個(gè)是標(biāo)準(zhǔn)模型，一個(gè)是模型。指定元素的寬度和高度最小最大屬性適用于的寬度和高度。盒模型的組成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有兩種標(biāo)準(zhǔn)的，一個(gè)是標(biāo)準(zhǔn)模型，一個(gè)是IE模型。 ?從上面兩圖不難看出在標(biāo)準(zhǔn)模型中，盒模型的寬高只是內(nèi)容（content）的寬高， 而在IE模型中盒模型...
摘要：舉一反三，我們也可以把角度反轉(zhuǎn)，就會(huì)往另外一邊彈跳。如果我們把動(dòng)畫(huà)里頭添加，就會(huì)變成線(xiàn)性的連續(xù)方式喔。 這是只用了一個(gè)div來(lái)做的小動(dòng)畫(huà)，純粹利用CSS3的animation來(lái)完成，就像是一個(gè)正方形在地上彈跳，碰到地面的時(shí)候尖角還會(huì)壓縮變圓，陰影的部分也會(huì)隨著正方形升高而縮小，至于到底該怎么完成呢？讓我們繼續(xù)看下去。 利用偽元素 由于只使用了一個(gè)div，要同時(shí)達(dá)到正方形旋轉(zhuǎn)與陰影縮放的...
摘要：舉一反三，我們也可以把角度反轉(zhuǎn)，就會(huì)往另外一邊彈跳。如果我們把動(dòng)畫(huà)里頭添加，就會(huì)變成線(xiàn)性的連續(xù)方式喔。 這是只用了一個(gè)div來(lái)做的小動(dòng)畫(huà)，純粹利用CSS3的animation來(lái)完成，就像是一個(gè)正方形在地上彈跳，碰到地面的時(shí)候尖角還會(huì)壓縮變圓，陰影的部分也會(huì)隨著正方形升高而縮小，至于到底該怎么完成呢？讓我們繼續(xù)看下去。 利用偽元素 由于只使用了一個(gè)div，要同時(shí)達(dá)到正方形旋轉(zhuǎn)與陰影縮放的...
摘要：可選取值只有兩個(gè)默認(rèn)取值換行示例這個(gè)屬性通常作用于內(nèi)聯(lián)元素。 這兩天接觸到一個(gè)很有意思的 CSS 屬性 -- box-decoration-break。下面就一起去一探究竟。 因?yàn)?MDN 上關(guān)于這個(gè)屬性，沒(méi)有中文文檔，所以一直在想一個(gè)合理貼切的中文翻譯。直譯一下： box -- 盒，可以理解為元素盒模型 decoration -- 裝飾，理解為元素樣式 break -- 斷行，參考...
閱讀 2179·2023-04-26 00:50
閱讀 2533·2021-10-13 09:39
閱讀 2319·2021-09-22 15:34
閱讀 1666·2021-09-04 16:41
閱讀 1386·2019-08-30 15:55
閱讀 2479·2019-08-30 15:53
閱讀 1749·2019-08-30 15:52
閱讀 796·2019-08-29 16:19
