這篇文章主要介紹了利用CSS中linear製作複雜的邊框效果實例分析的相關資料,利用linear-gradient屬性製作絢麗的邊框效果
網上看到一種利用linear-gradient屬性製作絢麗邊框效果的方法。先給程式碼,大家可以在自己的電腦中看效果:
有程式碼可以看出,其實我們並沒有使用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。
以上就是利用linear方法實現絢麗邊框的程式碼和解釋,大家可以在本地進行實現,以此發現更多新奇的組合實現方法。
以上是利用CSS中linear製作複雜的邊框效果實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!