[實踐總結]純css實現動態邊框

時間 2019-11-06

標籤實踐總結 css 實現動態邊框欄目 CSS 简体版

原文原文鏈接

背景

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

思路

看到這個效果，我首先想到的是設置元素的border屬性，惋惜border不能設置長度，沒法實現動效。另一種實現思路是添加四個div來分別實現上下左右的邊框效果，雖然可行，可是要添加四個額外元素，有點兒得不償失的感受。難道就沒有更好的解決方案了...前端

就在我絞盡腦汁的時候，靈光乍現，爲何不嘗試一下用CSS3多背景來模擬邊框呢，背景是能夠設置長度的，經過修改背景的長度，就能夠實現要求的動效。說幹就幹，趕快從網上搜索一下CSS3背景的相關知識。瀏覽器

CSS3 Background

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

一、多個背景圖片url

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

background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);
複製代碼

二、新屬性：Background Clipcode

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

background-clip: border-box; 背景延伸至邊框外沿（可是在邊框下層）
background-clip: padding-box; 背景延伸至內邊距（padding）外沿。不會繪製到邊框處
background-clip: content-box; 背景被裁剪至內容區（content box）外沿
background-clip: text; 背景被裁剪成文字的前景色（實驗屬性，須要加瀏覽器前綴）

三、新屬性: Background Origincdn

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

注意：當使用 background-attachment 爲fixed時，該屬性將被忽略不起做用。
background-origin：border-box; 從border邊框位置算起
background-origin：padding-box; 從padding位置算起
background-origin：content-box; 從content-box內容區域位置算起；

四、新屬性：Background Size

Background Size屬性用來設置背景圖片的大小。有幾個屬性值：

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

五、Background Repeat 調整

CSS2裏當設置背景的時候，它常常被標籤元素截取而顯示不全，CSS3介紹了2個新屬性來修復此問題。

background-repeat: space; 圖片以相同的間距平鋪且填充整個標籤元素
background-repeat: round; 圖片自動縮放直到適應且填充整個標籤元素

六、Background Attachment 的調整

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

每種混合效果參見：developer.mozilla.org/en-US/docs/…

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圓角

須要注意的是background模擬的邊框不等同於真正的邊框，是不佔用邊框的寬高的，計算盒子模型時要留心