成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

background:radial-gradient徑向漸變

gekylin / 2939人閱讀

摘要：用長(zhǎng)度值指定徑向漸變圓心的縱坐標(biāo)值。確定圓的類(lèi)型指定圓形的徑向漸變指定橢圓形的徑向漸變。用百分比指定橢圓徑向漸變的橫向或縱向半徑長(zhǎng)度。

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個(gè)參數(shù)，第一個(gè)表示橫坐標(biāo)，第二個(gè)表示縱坐標(biāo)；如果只提供一個(gè)，第二值默認(rèn)為50%，即center

①： 用百分比指定徑向漸變圓心的橫坐標(biāo)值。可以為負(fù)值。
①： 用長(zhǎng)度值指定徑向漸變圓心的橫坐標(biāo)值?？梢詾樨?fù)值。
    left： 設(shè)置左邊為徑向漸變圓心的橫坐標(biāo)值。
    center①： 設(shè)置中間為徑向漸變圓心的橫坐標(biāo)值。
    right： 設(shè)置右邊為徑向漸變圓心的橫坐標(biāo)值。
②： 用百分比指定徑向漸變圓心的縱坐標(biāo)值?？梢詾樨?fù)值。
②： 用長(zhǎng)度值指定徑向漸變圓心的縱坐標(biāo)值?？梢詾樨?fù)值。
    top： 設(shè)置頂部為徑向漸變圓心的縱坐標(biāo)值。
    center②： 設(shè)置中間為徑向漸變圓心的縱坐標(biāo)值。
    bottom： 設(shè)置底部為徑向漸變圓心的縱坐標(biāo)值。

確定圓的類(lèi)型

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

circle | ellipse 都接受該值作為 size

closest-side： 指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊
closest-corner： 指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的角
farthest-side： 指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊
farthest-corner： 指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的角

circle 接受該值作為 size

： 用長(zhǎng)度值指定正圓徑向漸變的半徑長(zhǎng)度。不允許負(fù)值。

ellipse 接受該值作為 size

： 用長(zhǎng)度值指定橢圓徑向漸變的橫向或縱向半徑長(zhǎng)度。不允許負(fù)值。
： 用百分比指定橢圓徑向漸變的橫向或縱向半徑長(zhǎng)度。不允許負(fù)值。

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

： 指定顏色。
： 用長(zhǎng)度值指定起止色位置。不允許負(fù)值
： 用百分比指定起止色位置。不允許負(fù)值

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113410.html

相關(guān)文章

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

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

    王巖威 評(píng)論0 收藏0

  • 淺探css3漸變

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

    lieeps 評(píng)論0 收藏0

  • 用純css來(lái)實(shí)現(xiàn)一個(gè)優(yōu)惠券

    摘要：關(guān)于徑向漸變的具體使用可以參考張?chǎng)涡竦奈恼聫较驖u變語(yǔ)法及輔助理解案例則那么怎樣實(shí)現(xiàn)我們要的效果呢我們先看看徑向漸變的語(yǔ)法徑向漸變由它的中心定義。 查看原文可以有更好的排版效果哦 前言 我們?cè)谄綍r(shí)的網(wǎng)頁(yè)中，經(jīng)常會(huì)見(jiàn)到這樣的優(yōu)惠券或者其他的券（特征就是會(huì)有反方向的圓角）。 showImg(https://segmentfault.com/img/remote/146000001570560...

    awkj 評(píng)論0 收藏0

  • 前端每日實(shí)戰(zhàn)：35# 視頻演示如何把 CSS 徑向漸變用得出神入化，只用一個(gè) DOM 元素就能畫(huà)出國(guó)

    摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽?？山换ヒ曨l教程此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbfmJt?w=400&h=304); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。 https://codepen.io/comeh...

    ssshooter 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<