網上看到一種利用linear-gradient屬性製作絢麗邊框效果的方法。首先給出代碼，大家可以在自己的電腦中查看效果：
<!DOCTYPE html><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> <p class="box first"></p> <p class="box second"></p> <p class="box third"></p></body></html>
有代碼可以看出，其實我們並沒有使用border，那麼這種邊框效果是怎麼實現的呢？
總體思路是，我們先定義一個白色的p，在定義一個白色方塊大一圈的帶顏色的p。兩個重疊一下，並且讓白色的p覆蓋彩色p，就實現了邊框的效果。
這裡面用到的css知識點很多。
1、:before偽類
通過上面的代碼我們看出，其實我們在定義的白色p中定義了一個: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。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
