摘要:表示圓形漸變,說的簡單點就是畫一個圓。表示容器最右邊,表示容器最上邊,換言之就是右上角。實現波浪邊框上代碼,增加一個樣式即可此處沒有字樣,表示原點在容器中心位置,,表示半徑范圍內是顏色,半徑到范圍內是顏色,半徑大于是顏色。
前言
大佬給了一張優惠券圖片(如下圖),我一看,這波浪型的邊框和內倒角用css寫不出來吧,遂向大佬說明并要ui切圖,大佬回答:css3可以實現。好吧,大佬都說可以實現了,還不趕緊去求谷哥,度娘。
實現內倒角上代碼,然后解釋代碼
重點解釋radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px)這個樣式是干嘛的。
circle表示圓形漸變,說的簡單點就是畫一個圓。畫圓就要知道原點。
circle at right top 中的right top就是原點位置。這里原點位置是相對于容器的坐標。right表示容器最右邊,top表示容器最上邊,換言之就是右上角。
circle at right top 后面的#fff, #fff 10px, transparent 11px就是從原點開始各種顏色漸變的長度。
代碼#fff, #fff 10px, transparent 11px中第一個#fff表示原點處為#fff顏色,#fff 10px表示距離原點半徑10px這段距離都是#fff顏色,transparent 11px表示距離原點10px到11px都是transparent顏色,由于沒有設置其他顏色,所以距離原點11px以后都是transparent顏色。
總結radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),就是以容器的右上角為原點畫圓,半徑10px范圍內是#fff顏色,半徑大于10px范圍內都是transparent顏色。
這樣在右上角就形成了內倒角
同理 radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px); 就不解釋了。
實現波浪邊框上代碼,增加一個css樣式即可
background: radial-gradient(circle, #fff, #fff 4px, transparent 5px); 此處沒有 at right top字樣,表示原點在容器中心位置,#fff, #fff 4px, transparent 5px,表示半徑4px范圍內是#fff顏色,半徑4px到5px范圍內是transparent顏色,半徑大于5px是transparent顏色。這樣就有一個直徑為8px的#fff顏色的圓位于容器(這里的容器是:after)中心。
(背景藍色是為了演示效果)
再加上background-size: 10px 10px;設置背景大小為寬10px高10px,這樣就能實現多個直徑為8px的#fff顏色的圓。
(背景藍色是為了演示效果)
left: -5px; 向左偏移 5px,使:after只有一半在.radial-gradient容器內
最后附上效果圖
總結實現內倒角其實是畫一個#fff顏色的圓,圓只有四分之一在容器內
實現波浪邊框其實是畫多個#fff顏色的圓,圓只有一半在容器內
參考文獻:
10個demo示例學會CSS3 radial-gradient徑向漸變
CSS-論css如何純代碼實現內凹圓角
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/117370.html
摘要:關于徑向漸變的具體使用可以參考張鑫旭的文章徑向漸變語法及輔助理解案例則那么怎樣實現我們要的效果呢我們先看看徑向漸變的語法徑向漸變由它的中心定義。 查看原文可以有更好的排版效果哦 前言 我們在平時的網頁中,經常會見到這樣的優惠券或者其他的券(特征就是會有反方向的圓角)。 showImg(https://segmentfault.com/img/remote/146000001570560...
摘要:原文地址本篇文章是筆者的設計指南學習筆記的第二部分,由于最近都在準備期末考的事,所以都沒來得及對設計指南進行一些總結,沒有看之前第一部分的話也可以從這里傳送過去。 原文地址:http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是筆者的 《CSS 設計指南》 學習筆記的第二部分,由于最近都在準備期末考的事,所以都沒來得及對 ...
摘要:不在指定漸變區域的,以距離其最近的顏色填充。設置漸變為從右到左。這是默認值,等同于留空不寫。最后奉上一碗純拉面。 Talk is cheap.Show me the code. 1.box-shadow showImg(https://segmentfault.com/img/bVypxt); .chopsticks{ position: absolute; ...
閱讀 1290·2021-11-24 09:39
閱讀 2632·2021-09-30 09:47
閱讀 1325·2021-09-22 15:15
閱讀 2410·2021-09-10 10:51
閱讀 1954·2019-08-30 15:55
閱讀 2977·2019-08-30 11:06
閱讀 896·2019-08-30 10:53
閱讀 830·2019-08-29 17:26