前端素材解析利用linear製作複雜的邊框效果

在網上看到一種利用linear-gradient屬性製作絢麗邊框效果的方法。首先給出**，大家可以在自己的電腦中檢視效果：

有**可以看出，其實我們並沒有使用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製作複雜的邊框效果