小編給大家分享一下css怎么增加邊框，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、營(yíng)銷網(wǎng)站、網(wǎng)站程序開(kāi)發(fā)、HTML5響應(yīng)式成都網(wǎng)站建設(shè)公司、成都手機(jī)網(wǎng)站制作、微商城、網(wǎng)站托管及成都網(wǎng)站改版、WEB系統(tǒng)開(kāi)發(fā)、域名注冊(cè)、國(guó)內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個(gè)建站步驟的完善服務(wù)體系。一人跟蹤測(cè)試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為成都戶外休閑椅行業(yè)客戶提供了網(wǎng)站設(shè)計(jì)服務(wù)。

增加邊框的方法有：1、border屬性，圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線，該屬性允許你規(guī)定元素邊框的樣式、寬度和顏色；2、border-image屬性，border-image屬性用于設(shè)置圖片邊框。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS border 屬性

元素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。

每個(gè)邊框有 3 個(gè)方面：寬度、樣式，以及顏色。

CSS border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。

border 簡(jiǎn)寫(xiě)屬性在一個(gè)聲明設(shè)置所有的邊框?qū)傩浴?/p>

可以按順序設(shè)置如下屬性：

border-width：規(guī)定邊框的寬度。

border-style：規(guī)定邊框的樣式。

border-color：規(guī)定邊框的顏色。

示例：

div{border:1px solid #000} 




div添加邊框

效果

CSS border-image屬性

border-image屬性用于設(shè)置圖片邊框，它是一個(gè)簡(jiǎn)寫(xiě)屬性，設(shè)置所有 border-image-* 屬性。如果省略值，會(huì)設(shè)置其默認(rèn)值。

語(yǔ)法：

border-image: source slice width outset repeat|initial|inherit;

屬性值：

• border-image-source：用于指定要用于繪制邊框的圖像的位置

• border-image-slice：圖像邊界向內(nèi)偏移

• border-image-width：圖像邊界的寬度

• border-image-outset：用于指定在邊框外部繪制 border-image-area 的量

• border-image-repeat：用于設(shè)置圖像邊界是否應(yīng)重復(fù)（repeat）、拉伸（stretch）或鋪滿（round）。

border-image的用處

沒(méi)用border-image之前，覺(jué)得css的屬性基本夠用，border-image完全是將簡(jiǎn)單的工作復(fù)雜化，當(dāng)學(xué)習(xí)完該屬性以后，發(fā)現(xiàn)該屬性的運(yùn)用能夠大大節(jié)省編碼時(shí)間和效率，總結(jié)一下，大致適用于以下兩個(gè)場(chǎng)景：

元素邊框不規(guī)則的情況。這時(shí)候，就需要用設(shè)計(jì)圖作為邊框背景，border-image與background-image相比，好處是更具靈活性，可以用代碼控制邊框背景的拉伸和重復(fù)，因而能夠創(chuàng)造出更多樣的效果

按鈕寬高不確定的情況。用border-image來(lái)制作按鈕，可以用同一張背景圖，制造出各種寬高的按鈕。

示例：

border-image 屬性用于指定一個(gè)元素的邊框圖像。
在這里，圖像平鋪（重復(fù)），以填補(bǔ)該地區(qū)。

在這里，圖像被拉伸以填補(bǔ)該地區(qū)

這是原始圖片:

效果

以上是“css怎么增加邊框”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！