建站
咨詢
售后
建站咨詢
新聞中心
CSS 中的 border 屬性，我想凡是了解一點(diǎn) CSS 的都知道它是作用，可以在 MDN 上找到對(duì)它的詳細(xì)介紹。
10年的平山網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整平山建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“平山網(wǎng)站設(shè)計(jì)”,“平山網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
border
簡(jiǎn)單來說，就是我們常用的邊框，一個(gè)非?；A(chǔ)的用法，就是
- border: 1px solid black;
- // 等價(jià)于
- border-width: 1px;
- border-style: solid;
- border-color: black;
下面是演示的效果：
當(dāng)然還可以定義很多奇形怪狀的邊框類型，比如圓角(radius，可能兼容性不是很好)，橢圓(其實(shí)只要懂了橢圓，邊框就可以隨意繪制了)。
- border 1px solid black;
- border-radius: 50%;
border-top,-right,-bottom,-left
看了這么多有意思的 DEMO，那么對(duì)于邊框，你真的了解了嗎?
最近碰到一個(gè)有意思的 CSS 樣式，讓我對(duì)于邊框有了很深刻的了解。平時(shí)我們用邊框，基本都要給邊框一個(gè)寬度，1px，偶爾2px，并沒有發(fā)現(xiàn)邊框與元素之間的關(guān)系，當(dāng)我們把 border-width換大一點(diǎn)的值，問題就來了。
- border: 20px solid gray;
并且，邊框是可以單獨(dú)設(shè)置 top，right，bottom，left 的值：
- border: 20px solid gray;
- border-top-width: 40px;
- border-left-width: 40px;
邊框與邊框的交界處該如何來判斷呢?
了解這一點(diǎn)非常重要，如果你也發(fā)現(xiàn)了這個(gè)問題，那么下面有意思的東西就來了：
- 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)的連線把邊框分開了，如果把元素的 width 和 height 都設(shè)置成 0，再加一個(gè) radius：
- width: 0;
- height: 0;
- border-radius: 50%;
前面 border-radius 的原理你也應(yīng)該懂了吧!
有關(guān)于 border-radius 的選取，可以看下 SF 上的這個(gè)提問 border-radius內(nèi)外半徑=<邊框?qū)挾葧r(shí)，盒子內(nèi)邊就成了直角怎么一回事。
用 border 實(shí)現(xiàn)箭頭
知道了一些 border 的基本知識(shí)，我們就可以實(shí)現(xiàn)常見于對(duì)話框的箭頭，像下面這種：
這個(gè)需要借助于 CSS 中的透明 transparent 來實(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ì)出來：
總結(jié)
看了這篇文章，是不是覺得 border 的功能非常強(qiáng)大，其實(shí)我們常見的一些氣泡和形狀都可以用 border 來實(shí)現(xiàn)，哈哈，非常鄙視那些用圖片的同學(xué)。共勉。
參考
CSS Refreshers: Borders
歡迎來我的博客交流。
當(dāng)前標(biāo)題：css中的有趣的border
鏈接地址：http://fisionsoft.com.cn/article/dhdpgdi.html
