如何使用純css實現動態邊框

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

　　CSS3 Background

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

　　1、 多個背景圖片

　　在CSS3里面，你可以在一個標簽元素里應用多個背景圖片。代碼類似與CSS2.0版本的寫法，但引用圖片之間需用“，”逗號隔開。第一個圖片是定位在元素最上面的背景，后面的背景圖片依次在它下面顯示，如下：

　　background-image: url（image1.jpg）， url（image2.jpg）， url（image3.jpg）;

　　2、新屬性：Background Clip

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

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

　　background-clip: padding-box; 背景延伸至內邊距（padding）外沿。不會繪制到邊框處

　　background-clip: content-box; 背景被裁剪至內容區（content box）外沿

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

　　3、新屬性： Background Origin

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

　　注意：當使用 background-attachment 為fixed時，該屬性將被忽略不起作用。

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

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

　　background-origin：content-box; 從content-box內容區域位置算起；

　　4、新屬性：Background Size

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

　　background-size: contain;縮小背景圖片使其適應標簽元素（主要是像素方面的比率）

　　background-size: cover;讓背景圖片放大延伸到整個標簽元素大小（主要是像素方面的比率）

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

　　background-size: 50% 100%;百分比是根據內容標簽元素大小，來縮放圖片的尺寸大小

　　5、Background Repeat 調整

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

　　background-repeat: space; 圖片以相同的間距平鋪且填充整個標簽元素

　　background-repeat: round; 圖片自動縮放直到適應且填充整個標簽元素

　　6、Background Attachment 的調整

　　Background Attachment有了一個新屬性值： local ，當標簽元素滾動時它才有效（如設置 overflow: scroll; ），當 background-attachment 設置為 scroll 時，背景圖片是不隨內容滾條滾動的。現在，有了 background-attachment: local ，就可以做到讓背景隨元素內容滾動而滾動了。

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

　　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];

　　現在我們用多背景來模擬一個元素的邊框

　　。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;

　　}

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

　　初步效果

　　接下來我們讓邊框動起來

　　。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模擬的邊框不等同于真正的邊框，是不占用邊框的寬高的，計算盒子模型時要留心

　　最后

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

以上是“如何使用純css實現動態邊框”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！