摘要：另外一種實(shí)現(xiàn)思路是添加四個(gè)來(lái)分別實(shí)現(xiàn)上下左右的邊框效果，雖然可行，但是要添加四個(gè)額外元素，有點(diǎn)兒得不償失的感覺(jué)。

這幾天工作中遇到一個(gè)交互需求，要求實(shí)現(xiàn)一個(gè)效果，當(dāng)鼠標(biāo)移入一個(gè)元素的時(shí)候，元素出現(xiàn)一個(gè)動(dòng)態(tài)的邊框，如圖：

思路

看到這個(gè)效果，我首先想到的是設(shè)置元素的border屬性，可惜border不能設(shè)置長(zhǎng)度，無(wú)法實(shí)現(xiàn)動(dòng)效。另外一種實(shí)現(xiàn)思路是添加四個(gè)div來(lái)分別實(shí)現(xiàn)上下左右的邊框效果，雖然可行，但是要添加四個(gè)額外元素，有點(diǎn)兒得不償失的感覺(jué)。難道就沒(méi)有更好的解決方案了...

就在我絞盡腦汁的時(shí)候，靈光乍現(xiàn)，為什么不嘗試一下用CSS3多背景來(lái)模擬邊框呢，背景是可以設(shè)置長(zhǎng)度的，通過(guò)修改背景的長(zhǎng)度，就可以實(shí)現(xiàn)要求的動(dòng)效。說(shuō)干就干，趕快從網(wǎng)上搜索一下CSS3背景的相關(guān)知識(shí)。

CSS3對(duì)于background做了一些修改，最明顯的一個(gè)就是采用設(shè)置多背景，不但添加了4個(gè)新屬性，并且還對(duì)目前的屬性進(jìn)行了調(diào)整增強(qiáng)。

1、 多個(gè)背景圖片

在CSS3里面，你可以在一個(gè)標(biāo)簽元素里應(yīng)用多個(gè)背景圖片。代碼類似與CSS2.0版本的寫(xiě)法，但引用圖片之間需用“，”逗號(hào)隔開(kāi)。第一個(gè)圖片是定位在元素最上面的背景，后面的背景圖片依次在它下面顯示，如下：

background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);

2、新屬性：Background Clip

background-clip 顧名思義，背景剪切，用來(lái)設(shè)置元素的背景（背景圖片或顏色）是否延伸到邊框下面。

background-clip: border-box; 背景延伸至邊框外沿（但是在邊框下層）

background-clip: padding-box; 背景延伸至內(nèi)邊距（padding）外沿。不會(huì)繪制到邊框處

background-clip: content-box; 背景被裁剪至內(nèi)容區(qū)（content box）外沿

background-clip: text; 背景被裁剪成文字的前景色（實(shí)驗(yàn)屬性，需要加瀏覽器前綴）

3、新屬性: Background Origin

此屬性需要與background-position配合使用。你可以用background-position計(jì)算定位是從border，padding或content boxes內(nèi)容區(qū)域算起。（類似background-clip）

注意：當(dāng)使用 background-attachment 為fixed時(shí)，該屬性將被忽略不起作用。

background-origin：border-box; 從border邊框位置算起

background-origin：padding-box; 從padding位置算起

background-origin：content-box; 從content-box內(nèi)容區(qū)域位置算起；

4、新屬性：Background Size

Background Size屬性用來(lái)設(shè)置背景圖片的大小。有幾個(gè)屬性值：

background-size: contain; 縮小背景圖片使其適應(yīng)標(biāo)簽元素（主要是像素方面的比率）

background-size: cover; 讓背景圖片放大延伸到整個(gè)標(biāo)簽元素大?。ㄖ饕窍袼胤矫娴谋嚷剩?/p>

background-size: 100px 100px; 標(biāo)明背景圖片縮放的尺寸大小

background-size: 50% 100%; 百分比是根據(jù)內(nèi)容標(biāo)簽元素大小，來(lái)縮放圖片的尺寸大小

5、Background Repeat 調(diào)整

CSS2里當(dāng)設(shè)置背景的時(shí)候，它經(jīng)常被標(biāo)簽元素截取而顯示不全，CSS3介紹了2個(gè)新屬性來(lái)修復(fù)此問(wèn)題。

background-repeat: space; 圖片以相同的間距平鋪且填充整個(gè)標(biāo)簽元素

background-repeat: round; 圖片自動(dòng)縮放直到適應(yīng)且填充整個(gè)標(biāo)簽元素

6、Background Attachment 的調(diào)整

Background Attachment有了一個(gè)新屬性值:local，當(dāng)標(biāo)簽元素滾動(dòng)時(shí)它才有效(如設(shè)置overflow: scroll;)，當(dāng)background-attachment設(shè)置為scroll時(shí)，背景圖片是不隨內(nèi)容滾條滾動(dòng)的?，F(xiàn)在，有了background-attachment: local，就可以做到讓背景隨元素內(nèi)容滾動(dòng)而滾動(dòng)了。

7、新增 Background Blend Mode 背景的混合模式是當(dāng)背景重疊時(shí)計(jì)算像素最終色值的方法，每種混合模式采用前景和背景顏色值（分別為頂部顏色和底部顏色），執(zhí)行其計(jì)算并返回顏色值。最終的可見(jiàn)層是對(duì)混合層中的每個(gè)重疊像素執(zhí)行混合模式計(jì)算的結(jié)果。 background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;

每種混合效果參見(jiàn)：developer.mozilla.org/en-US/docs/…

我們這里主要使用了background-img、background-size 和 background-position 三個(gè)屬性。

background-image: [background-image], [background-image], [background-image]; 
background-position: [background-position], [background-position], [background-position]; 
background-repeat: [background-repeat], [background-repeat], [background-repeat]; 

簡(jiǎn)寫(xiě)形式如下：

background: [background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat]; 

現(xiàn)在我們用多背景來(lái)模擬一個(gè)元素的邊框

/*CSS*/
.exammple {
    background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    background-position: left top, right top, right bottom, left bottom;
}

<div class="exammple">div>

我們用四個(gè)漸變的背景來(lái)模擬四個(gè)邊框（為什么我們要用漸變而不是直接的Color呢？這是由于CSS的多背景只能是background-image， background-color不支持多個(gè)值,所有即便是純色的邊框，我們也只能使用漸變）。

接下來(lái)我們讓邊框動(dòng)起來(lái)

/*CSS*/
.exammple {
    transition: ease-in .3s;
    background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
    background-size: 0 2px, 2px 0, 0 2px, 2px 0;
    background-position: left top, right top, right bottom, left bottom;
}
.exammple:hover {
    background-size: 100% 2px,  2px 100%, 100% 2px, 2px 100%;
}

現(xiàn)在我們已經(jīng)按要求實(shí)現(xiàn)了交互效果。

相比border屬性，用background的模擬邊框存在以下的優(yōu)勢(shì)和劣勢(shì)

需要注意的是background模擬的邊框不等同于真正的邊框，是不占用邊框的寬高的，計(jì)算盒子模型時(shí)要留心

由于CSS3對(duì)背景屬性的進(jìn)一步豐富，利用CSS3的多背景可以實(shí)現(xiàn)很多以前必須借助js或圖片才能實(shí)現(xiàn)的效果，比如半透明背景、幾何圖案背景、條紋背景等，期待和大家一塊兒去探索CSS的奧秘。

快狗打車前端團(tuán)隊(duì)專注前端技術(shù)分享，定期推送高質(zhì)量文章，歡迎關(guān)注點(diǎn)贊。