前端素材解析—利用linear制作復雜的邊框效果 · 前端開發常用技巧經驗記錄

在網上看到一種利用linear-gradient屬性制作絢麗邊框效果的方法。首先給出代碼，大家可以在自己的電腦中查看效果： ~~~ <html?lang="en"?xmlns="http://www.w3.org/1999/xhtml">?? <head>?? ????<meta?charset="utf-8"?/>?? ????<title>title>?? ????<style>?? ????????.box?{?? ????????????margin:?80px?30px;?? ????????????width:?200px;?? ????????????height:?200px;?? ????????????position:?relative;?? ????????????background:?#fff;?? ????????????float:?left;?? ????????}?? ????????????.box:before?{?? ????????????????content:?'';?? ????????????????z-index:?-1;?? ????????????????position:?absolute;?? ????????????????width:?220px;?? ????????????????height:?220px;?? ????????????????top:?-10px;?? ????????????????left:?-10px;?? ????????????}?? ????????.first:before?{?? ????????????background-image:?linear-gradient(90deg,?yellow,?gold);?? ????????}?? ????????.second:before?{?? ????????????background-image:?linear-gradient(0deg,?orange,?red);?? ????????}?? ????????.third:before?{?? ????????????background-image:?repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d?30px,#f2f2f2?30px,#f2f2f2?40px,#0e71bb?40px,#0e71bb?70px,#f2f2f2?70px,#f2f2f2?80px);?? ????????}?? ????<style>?? <head>?? <body>?? ????<div?class="box?first">div>?? ????<div?class="box?second">div>?? ????<div?class="box?third">div>?? <body>?? <html>?? ~~~ 有代碼可以看出，其實我們并沒有使用border，那么這種邊框效果是怎么實現的呢？總體思路是，我們先定義一個白色的div，在定義一個白色方塊大一圈的帶顏色的div。兩個重疊一下，并且讓白色的div覆蓋彩色div，就實現了邊框的效果。這里面用到的css知識點很多。 1、:before偽類通過上面的代碼我們看出，其實我們在定義的白色div中定義了一個:before偽類，把彩色方塊所有的樣式都放在了這里。這是因為使用:before定義可以使得定位更加方便，只要調整top和left為邊框的寬度就可以了。同時也是的二者成為一個整體。 2、linear-gradient 現在很多瀏覽器都支持這個css方法。該方法有以下三種使用模式： ①background:linear-gradient(top,#fff,#000) 這段代碼的意思是，從上部開始為白色，到底部為黑色進行過度。 ②background:linear-gradient(top,right,#fff,#000) 這段代碼關于位置傳遞了兩個參數，top和right，表示從右上放開始，到左下方變化，其他道理與第一個相同。 ③background:linear-gradient(30deg,#fff,#000) 這段代碼的第一個參數傳遞的是角度，其實道理和位置是一樣的，只是不是從標準的位置開始變化了。那么角度和位置的對應關系是什么呢？根據實驗，0度對應bottom，90度對應left，180度對應top，360度對應right。以上就是利用linear方法實現絢麗邊框的代碼和解釋，大家可以在本地進行實現，以此發現更多新奇的組合實現方法。