background:radial-gradient徑向漸變

gekylin 發(fā)布于2019-08-29 15:34 / 2907人閱讀

摘要：用長度值指定徑向漸變圓心的縱坐標值。確定圓的類型指定圓形的徑向漸變指定橢圓形的徑向漸變。用百分比指定橢圓徑向漸變的橫向或縱向半徑長度。

background: radial-gradient(shape size at position, start-color, ..., last-color);
= radial-gradient([ [ || ] [ at ]? , | at , ]?[ , ]+)
= [ ① | ① | left | center① | right ]? [ ② | ② | top | center② | bottom ]?
= circle | ellipse
= | [ || ]
= closest-side | closest-corner | farthest-side | farthest-corner
=
= [ | ]{2}
= |
= [ | ]?

確定圓心的位置。如果提供2個參數(shù)，第一個表示橫坐標，第二個表示縱坐標；如果只提供一個，第二值默認為50%，即center

①： 用百分比指定徑向漸變圓心的橫坐標值。可以為負值。
①： 用長度值指定徑向漸變圓心的橫坐標值。可以為負值。
    left： 設置左邊為徑向漸變圓心的橫坐標值。
    center①： 設置中間為徑向漸變圓心的橫坐標值。
    right： 設置右邊為徑向漸變圓心的橫坐標值。
②： 用百分比指定徑向漸變圓心的縱坐標值。可以為負值。
②： 用長度值指定徑向漸變圓心的縱坐標值。可以為負值。
    top： 設置頂部為徑向漸變圓心的縱坐標值。
    center②： 設置中間為徑向漸變圓心的縱坐標值。
    bottom： 設置底部為徑向漸變圓心的縱坐標值。

確定圓的類型

circle： 指定圓形的徑向漸變
ellipse： 指定橢圓形的徑向漸變。

circle | ellipse 都接受該值作為 size

closest-side： 指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
closest-corner： 指定徑向漸變的半徑長度為從圓心到離圓心最近的角
farthest-side： 指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
farthest-corner： 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

circle 接受該值作為 size

： 用長度值指定正圓徑向漸變的半徑長度。不允許負值。

ellipse 接受該值作為 size

： 用長度值指定橢圓徑向漸變的橫向或縱向半徑長度。不允許負值。
： 用百分比指定橢圓徑向漸變的橫向或縱向半徑長度。不允許負值。

用于指定漸變的起止顏色：

： 指定顏色。
： 用長度值指定起止色位置。不允許負值
： 用百分比指定起止色位置。不允許負值

GPU云服務器云服務器徑向基函數(shù) 圖片漸變完美漸變背景漸變

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113410.html

CSS3徑向漸變radial-gradient實現(xiàn)波浪邊框和內倒角

摘要：表示圓形漸變，說的簡單點就是畫一個圓。表示容器最右邊，表示容器最上邊，換言之就是右上角。實現(xiàn)波浪邊框上代碼，增加一個樣式即可此處沒有字樣，表示原點在容器中心位置，，表示半徑范圍內是顏色，半徑到范圍內是顏色，半徑大于是顏色。前言大佬給了一張優(yōu)惠券圖片(如下圖)，我一看，這波浪型的邊框和內倒角用css寫不出來吧，遂向大佬說明并要ui切圖，大佬回答：css3可以實現(xiàn)。好吧，大佬都說可以實...

王巖威 2019-08-30 15:55 評論0 收藏0
淺探css3漸變

摘要：基本用法想要知道線性漸變有什么用，當然要先學習它的屬性和用法。下面我們先一起學習一下線性漸變的屬性。函數(shù)的第一個參數(shù)是角度或者方向，第二個參數(shù)是截止顏色的值，要想產生漸變的效果，當然至少要兩個或者兩個以上的顏色值。 css3的漸變屬性已經(jīng)在各種網(wǎng)頁設計中被廣泛使用，在沒有css3的漸變屬性之前，要實現(xiàn)一些多種顏色切換的效果圖，你可能別無他法，只能用一個圖片來顯示，雖然你知道使用圖片需要...

lieeps 2019-08-29 17:17 評論0 收藏0
用純css來實現(xiàn)一個優(yōu)惠券

摘要：關于徑向漸變的具體使用可以參考張鑫旭的文章徑向漸變語法及輔助理解案例則那么怎樣實現(xiàn)我們要的效果呢我們先看看徑向漸變的語法徑向漸變由它的中心定義。查看原文可以有更好的排版效果哦前言我們在平時的網(wǎng)頁中，經(jīng)常會見到這樣的優(yōu)惠券或者其他的券（特征就是會有反方向的圓角）。 showImg(https://segmentfault.com/img/remote/146000001570560...

awkj 2019-08-30 15:54 評論0 收藏0
前端每日實戰(zhàn)：35# 視頻演示如何把 CSS 徑向漸變用得出神入化，只用一個 DOM 元素就能畫出國

摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。可交互視頻教程此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbfmJt?w=400&h=304); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comeh...

ssshooter 2019-08-29 15:33 評論0 收藏0