Css3 多背景模擬動態邊框

問題

這幾天工做中遇到一個問題，要求實現一個效果，當鼠標移入一個元素的時候，元素出現一個動態的邊框，如圖：

我首先想到的是border屬性，但是border屬性不能設置長度。若是用border實現，須要用其餘元素來模擬，比較麻煩。後來忽然想起之前在網上看到有人用CSS3的多背景來模擬邊框，就是了一下。

css3 背景

CSS3對於background作了一些修改，最明顯的一個就是採用設置多背景，不但添加了4個新屬性，而且還對目前的屬性進行了調整加強。

一、 多個背景圖片

在css3裏面，你能夠再一個標籤元素裏應用多個背景圖片。代碼相似與css2.0版本的寫法，但引用圖片之間需用「，」逗號隔開。第一個圖片是定位在元素最上面的背景，後面的背景圖片依次在它下面顯示，以下：

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

二、新屬性：Background Clip

此討論讓咱們回到文章開始提到的關於背景被border邊框遮擋的問題。background-clip的添加讓咱們徹底可以控制背景顯示的位置。屬性值以下：

• background-clip: border; 背景在border邊框下開始顯示
• background-clip: padding; 背景在padding下開始顯示，而不是border邊框下開始
• background-clip: content; 背景在內容區域下開始顯示，而不是border邊框下開始或padding下開始。
• background-clip: no-clip; 默認屬性值，相似與background-clip: border;

三、新屬性: Background Origin

此屬性須要與background-position配合使用。你能夠用background-position計算定位是從border，padding或content boxes內容區域算起。（相似background-clip）

• background-origin：border; 從border邊框位置算起
• background-origin：padding; 從padding位置算起
• background-origin：content; 從content-box內容區域位置算起；

background-clip和background-origin的不一樣之處www.CSS3.info網站給作了很好的分析講解。

四、新屬性：Background Size

Background Size屬性用來重設你的背景圖片。有幾個屬性值：

• background-size: contain; 縮小背景圖片使其適應標籤元素（主要是像素方面的比率）
• background-size: cover; 讓背景圖片放大延伸到整個標籤元素大小（主要是像素方面的比率）
• background-size: 100px 100px; 標明背景圖片縮放的尺寸大小
• background-size: 50% 100%; 百分比是根據內容標籤元素大小，來縮放圖片的尺寸大小

你能夠去CSS 3 specifications站點看一下簡單的案例說明。

五、新屬性：Background Break

css3裏標籤元素能被分在不一樣區域（如：讓內聯元素span跨多行），background-break屬性可以控制背景在不一樣區域顯示。 屬性值：

• Background-break: continuous; 此屬性是默認值，忽視區域之間的間隔空隙（給它們應用圖片就好像把它們當作一個區域同樣）
• Background-break: bounding-box; 從新考慮區域之間的間隔
• Background-break: each-box; 對每個獨立的標籤區域進行背景的從新劃分。

六、背景顏色的調整

background-color屬性在css3版本里面稍微作了加強，除了指定background color背景顏色以外，還能夠對不使用的標籤元素背景圖片進行去色處理。

background-color: green / blue;此例子裏，這背景顏色多是綠色，然而，若是底部背景圖片無效的話，藍色將代替綠色來顯示。若是你沒有指定某個顏色的話，它將其視爲透明。

七、背景重複的調整

css2裏當設置背景的時候，它常常被標籤元素截取而顯示不全，css3介紹了2個新屬性來修復此問題。 space：圖片以相同的間距平鋪且填充整個標籤元素 round：圖片自動縮放直到適應且填充整個標籤元素

CSS 3 specifications網站對background-repeat: space的使用就是一個現成的例子。

八、Background Attachment 的調整

Background Attachment有了一個新屬性值:local,當標籤元素滾動時它纔有效(如設置overflow:scroll;)，當background-attachment設置爲scroll時，背景圖片是不隨內容滾條滾動的。如今，有了background-attachment:local，就能夠作到讓背景隨元素內容滾動而滾動了。

css3 多背景模擬元素邊框

咱們這裏主要使用了background-img、background-size 和 background-position 三個屬性。

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

簡寫形式以下：

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

如今咱們用多背景來模擬一個元素的邊框

/*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>

咱們用四個漸變的背景來模擬四個邊框（爲何咱們要用漸變而不是直接的Color呢？這是因爲Css的多背景只能是background-image, background-color不支持多個值,全部即使是純色的邊框，咱們也只能使用漸變）。

接下來咱們讓邊框動起來

/*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%;
}

相比border屬性，用background的模擬邊框的優點在於能夠控制邊框的寬高，運動方向等，實現不少border不能實現的效果，劣勢在於不能實現border的圓角。