本文將為大家詳細(xì)介紹“css的背景圖如何加邊框”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“css的背景圖如何加邊框”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供順城網(wǎng)站建設(shè)、順城做網(wǎng)站、順城網(wǎng)站設(shè)計(jì)、順城網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、順城企業(yè)網(wǎng)站模板建站服務(wù)，10余年順城做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

css是什么意思

css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對(duì)于網(wǎng)頁進(jìn)行格式化。

css背景圖加邊框的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后通過“background-image”引入一張背景圖；最后通過border屬性設(shè)置邊框即可。

背景樣式

常用的背景樣式

• 背景色：background-color

background-color: gray;
background-color: #808080;
background-color: rgb(128,128,128);

• 背景圖像：background-image

body{background-image: url("images/bg.jpg");}

• 背景圖片重復(fù)：background-repeat

• 背景圖片定位：background-position

background-position屬性值：

①使用關(guān)鍵字：background-position:center left

②使用百分?jǐn)?shù)值：background-position: 50% 50%

③使用長(zhǎng)度值：background-position:300px 100px

/*背景樣式綜合使用*/
background: #00ff00 url(image/bg.jpg)  no-repeat center;

• 背景圖片固定：background-attachment

background-attachment屬性設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。

1. scroll：默認(rèn)值。背景圖像會(huì)隨著頁面的滾動(dòng)而移動(dòng)。

2. fixed：當(dāng)頁面的其余部分滾動(dòng)時(shí)，背景圖像不會(huì)移動(dòng)。
   【推薦：css視頻教程】

background-size

• 規(guī)定背景圖片的尺寸

• 語法：background-size: length| percentage| cover| contain;

cover和contain

    
    
    
        p{width: 700px;height: 400px;border: 2px solid plum;background-repeat: no-repeat;
            background-image: url(img/design.jpg);background-size: cover;}
    


    
圖片尺寸

background-origin

• 規(guī)定背景圖片的定位區(qū)域（background-position的參考位置）

• 語法：background-origin: border-box | padding-box | content-box;

默認(rèn)是padding-box

background-origin

     
    


    
背景圖像邊界框的相對(duì)位置：
    
      CSS 允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。CSS 在這方面的能力遠(yuǎn)遠(yuǎn)在 HTML 之上。CSS 允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。CSS 在這方面的能力遠(yuǎn)遠(yuǎn)在 HTML 之上。
    

    
背景圖像的相對(duì)位置的內(nèi)容框：
    
      CSS 允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。CSS 在這方面的能力遠(yuǎn)遠(yuǎn)在 HTML 之上。CSS 允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。CSS 在這方面的能力遠(yuǎn)遠(yuǎn)在 HTML 之上。
    

background-clip

• 規(guī)定背景的繪制區(qū)域（決定背景在哪些區(qū)域顯示）。

• 語法：background-clip: border-box| padding-box| content-box;

background-clip與background-origin

• background-clip：border| padding| content  指定背景在哪些區(qū)域可以顯示，但與背景開始繪制的位置無關(guān)。背景的繪制的位置可以出現(xiàn)在不顯示背景的區(qū)域，這時(shí)就相當(dāng)于背景圖片被不顯示背景的區(qū)域裁剪了一部分。

• background-origin：padding| border| content  指定背景從哪個(gè)區(qū)域(邊框、補(bǔ)白或內(nèi)容)開始繪制。可以用此屬性在邊框上繪制背景，但邊框上的背景顯不顯示出來就要由background-clip來決定了。

     
    s


    

邊框樣式

常用的邊框樣式

border

• 設(shè)置邊框?qū)挾龋?code>border-width 寬度值。示例： border-width:1px;

• 設(shè)置邊框顏色：border-color 顏色。示例：border-color:#cccccc;

• 設(shè)置邊框樣式：border-style 樣式關(guān)鍵字。示例：border-style: solid;

邊框線類型

• 邊框復(fù)合樣式：border: width / style / color 示例：border: 3px dotted#ff9900

border-radius

圓角邊框——border-radius 屬性。

• 語法 border-radius: 1-4 length | %;

• border-radius屬性可包含兩個(gè)參數(shù)值，第一個(gè)值表示圓角的水平半徑，第二個(gè)值表示圓角的垂直半徑，兩個(gè)參數(shù)值通過斜線分隔。如果僅包含一個(gè)參數(shù)值，表示兩個(gè)值相同，即1/4圓角。

border-radius

如果要繪制的圓角邊框4個(gè)角的半徑各不相同時(shí)，需按左上角、右上角、右下角、左下角的順序設(shè)置每個(gè)方向圓角半徑的值。

• border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius（繪制圓角邊框的四個(gè)角的半徑各不相同時(shí)，按照上述的順序）

• 如果省略 bottom-right，則與 top-left 相同。如果省略 top-right，則與 top-left 相同。

p{
    border-top-left-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 30px;
    /*上述的四句代碼等同于：border-radius:0px 10px 20px 30px;*/
}

border-image

圖像邊框——border-image 屬性

• 可以讓元素的長(zhǎng)度或?qū)挾忍幱陔S時(shí)變化的邊框統(tǒng)一使用一個(gè)圖像文件進(jìn)行繪制。

• 語法：border-image: url(圖像文件的路徑) A B C D

ABCD四個(gè)參數(shù)表示瀏覽器自動(dòng)把圖像分隔時(shí)的上邊距、右邊距、下邊距以及左邊距。

border-image 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置以下屬性：

陰影

向框添加一個(gè)或多個(gè)陰影——box-shadow 屬性

語法：box-shadow: h-shadow v-shadow blur spread color inset;

如果你能讀到這里，小編希望你對(duì)“css的背景圖如何加邊框”這一關(guān)鍵問題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！