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

資訊專欄INFORMATION COLUMN

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

王巖威 / 1972人閱讀

摘要：表示圓形漸變，說的簡單點(diǎn)就是畫一個圓。表示容器最右邊，表示容器最上邊，換言之就是右上角。實(shí)現(xiàn)波浪邊框上代碼，增加一個樣式即可此處沒有字樣，表示原點(diǎn)在容器中心位置，，表示半徑范圍內(nèi)是顏色，半徑到范圍內(nèi)是顏色，半徑大于是顏色。

前言

大佬給了一張優(yōu)惠券圖片(如下圖)，我一看，這波浪型的邊框和內(nèi)倒角用css寫不出來吧，遂向大佬說明并要ui切圖，大佬回答：css3可以實(shí)現(xiàn)。好吧，大佬都說可以實(shí)現(xiàn)了，還不趕緊去求谷哥，度娘。

實(shí)現(xiàn)內(nèi)倒角

上代碼，然后解釋代碼

重點(diǎn)解釋radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px)這個樣式是干嘛的。

circle表示圓形漸變，說的簡單點(diǎn)就是畫一個圓。畫圓就要知道原點(diǎn)。

circle at right top 中的right top就是原點(diǎn)位置。這里原點(diǎn)位置是相對于容器的坐標(biāo)。right表示容器最右邊，top表示容器最上邊，換言之就是右上角。

circle at right top 后面的#fff, #fff 10px, transparent 11px就是從原點(diǎn)開始各種顏色漸變的長度。

代碼#fff, #fff 10px, transparent 11px中第一個#fff表示原點(diǎn)處為#fff顏色，#fff 10px表示距離原點(diǎn)半徑10px這段距離都是#fff顏色，transparent 11px表示距離原點(diǎn)10px到11px都是transparent顏色，由于沒有設(shè)置其他顏色，所以距離原點(diǎn)11px以后都是transparent顏色。

總結(jié)radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),就是以容器的右上角為原點(diǎn)畫圓，半徑10px范圍內(nèi)是#fff顏色，半徑大于10px范圍內(nèi)都是transparent顏色。

這樣在右上角就形成了內(nèi)倒角

同理 radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px); 就不解釋了。

實(shí)現(xiàn)波浪邊框

上代碼，增加一個css樣式即可

background: radial-gradient(circle, #fff, #fff 4px, transparent 5px); 此處沒有 at right top字樣，表示原點(diǎn)在容器中心位置，#fff, #fff 4px, transparent 5px，表示半徑4px范圍內(nèi)是#fff顏色，半徑4px到5px范圍內(nèi)是transparent顏色，半徑大于5px是transparent顏色。這樣就有一個直徑為8px的#fff顏色的圓位于容器(這里的容器是:after)中心。

(背景藍(lán)色是為了演示效果)

再加上background-size: 10px 10px;設(shè)置背景大小為寬10px高10px，這樣就能實(shí)現(xiàn)多個直徑為8px的#fff顏色的圓。

(背景藍(lán)色是為了演示效果)

left: -5px; 向左偏移 5px，使:after只有一半在.radial-gradient容器內(nèi)

最后附上效果圖

總結(jié)

實(shí)現(xiàn)內(nèi)倒角其實(shí)是畫一個#fff顏色的圓，圓只有四分之一在容器內(nèi)

實(shí)現(xiàn)波浪邊框其實(shí)是畫多個#fff顏色的圓，圓只有一半在容器內(nèi)

參考文獻(xiàn)：
10個demo示例學(xué)會CSS3 radial-gradient徑向漸變
CSS-論css如何純代碼實(shí)現(xiàn)內(nèi)凹圓角

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

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

相關(guān)文章

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

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

    awkj 評論0 收藏0

  • CSS 設(shè)計指南 學(xué)習(xí)筆記 二

    摘要：原文地址本篇文章是筆者的設(shè)計指南學(xué)習(xí)筆記的第二部分，由于最近都在準(zhǔn)備期末考的事，所以都沒來得及對設(shè)計指南進(jìn)行一些總結(jié)，沒有看之前第一部分的話也可以從這里傳送過去。 原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是筆者的 《CSS 設(shè)計指南》 學(xué)習(xí)筆記的第二部分，由于最近都在準(zhǔn)備期末考的事，所以都沒來得及對 ...

    printempw 評論0 收藏0

  • 淺探css3漸變

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

    lieeps 評論0 收藏0

  • 【css3學(xué)習(xí)系列】之box-shadow,radial-gradient,linear-gradi

    摘要：不在指定漸變區(qū)域的，以距離其最近的顏色填充。設(shè)置漸變?yōu)閺挠业阶蟆＿@是默認(rèn)值，等同于留空不寫。最后奉上一碗純拉面。 Talk is cheap.Show me the code. 1.box-shadow showImg(https://segmentfault.com/img/bVypxt); .chopsticks{ position: absolute; ...

    LdhAndroid 評論0 收藏0

  • CSS斜切角

    摘要：問題斜切角在設(shè)計和印刷中是相當(dāng)受歡迎的樣式。當(dāng)斜切角只存在元素的一側(cè)，并且每個都占據(jù)元素的高度的時候，一個箭頭的形狀產(chǎn)生了，這在按鈕和面包屑導(dǎo)航中非常受歡迎?，F(xiàn)在，假設(shè)我們需要兩個斜切角，左右下角分別一個。 問題 斜切角在Web設(shè)計和印刷中是相當(dāng)受歡迎的樣式。它通常是在一個或多個元素的角落切一個45°的角（也就是所謂的斜切角）。特別是最近，扁平化設(shè)計的勢頭壓過了擬真設(shè)計，也使這種效果...

    番茄西紅柿 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<