整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          css實(shí)現(xiàn)漸變色圓角邊框

          標(biāo)

          使用border-image可以設(shè)置漸變色邊框,但是當(dāng)它與border-radius組合使用時(shí),兩者卻無法兼容。

          因此,實(shí)現(xiàn)這個(gè)效果的另一個(gè)思路是:利用兩個(gè)圓角矩形的面積差形成邊框。故可以使用以下方法實(shí)現(xiàn):

          基礎(chǔ)版本

          使用嵌套的兩個(gè)div,并設(shè)置父元素的內(nèi)邊距padding以此制造面積差,從而形成邊框的效果。

          HTML

          復(fù)制代碼

          <div class="border-box">    <div class="border-content"></div></div>

          CSS

          復(fù)制代碼

          .border-box{  width: 200px;  background:linear-gradient(0deg,#00135A,#01A1FF);  border-radius: 5px;  padding: 2px;/* 邊框?qū)挾?*/}.border-content{  width: 200px;  height: 100px;  border-radius: 5px;   background-color: white;  }

          簡化HTML結(jié)構(gòu)版:使用偽元素

          使用偽元素充當(dāng)背景也同樣可以達(dá)到上述效果,注意設(shè)置z-index將偽元素置于內(nèi)容之下

          HTML

          復(fù)制代碼

          <div class="border-content"></div>

          CSS

          復(fù)制代碼

          .border-content{  width: 200px;  height: 100px;  border-radius: 5px;    position: relative;  background-color: white;  }.border-content::before{  content: '';  position: absolute;  top: -2px; right: -2px; bottom: -2px; left: -2px;/* 邊框?qū)挾?*/  border-radius: 5px;   background: linear-gradient(0deg,#00135A,#01A1FF);    z-index: -1;/* 置于內(nèi)容之下 */ }

          進(jìn)階版:使用background相關(guān)屬性

          給一個(gè)div設(shè)置兩個(gè)不同大小的背景,從而利用兩個(gè)背景制造面積差,也可以實(shí)現(xiàn)上述效果。

          • 如何給div設(shè)置兩個(gè)背景?

          使用background-image屬性設(shè)置兩組顏色,一組是內(nèi)容顏色,另一組是border邊框顏色,用逗號(hào)隔開。

          • 如何將兩個(gè)背景設(shè)置成不同大小?

          可以使用background-clip 屬性,該屬性規(guī)定了背景的繪制區(qū)域。給一組設(shè)置為padding-box(背景繪制區(qū)域從內(nèi)邊距框開始),第二組為border-box(背景繪制區(qū)域延伸至邊框)。

          此時(shí)的效果如下:

          可以看出背景色并不是我們想要的效果,原因是這兩組的繪制起點(diǎn)都是padding-box。

          • 如何更改背景繪制區(qū)域的起點(diǎn)?

          使用background-origin屬性,該屬性規(guī)定了背景的繪制區(qū)域相對(duì)于什么位置來定位。給一組設(shè)置為padding-box(背景繪制區(qū)域以 padding 區(qū)域?yàn)閰⒖迹诙M為border-box(背景繪制區(qū)域以 border 區(qū)域?yàn)閰⒖迹?/p>

          此時(shí)即可得到想要的效果,代碼如下:

          HTML

          復(fù)制代碼

          <div class="border-content"></div>

          CSS

          復(fù)制代碼

          .border-content{  width: 200px;  height: 100px;  border: 2px solid transparent;  border-radius: 5px;  background-clip: padding-box,border-box;  background-origin: padding-box,border-box;  background-image: linear-gradient(0deg,#FFF,#fff),linear-gradient(0deg,#00135A,#01A1FF);}

          缺陷

          該思路無法實(shí)現(xiàn)透明底的漸變色圓角邊框。

          次來看一個(gè)帶特殊圓角導(dǎo)航欄布局,如下谷歌瀏覽器的標(biāo)簽欄:

          這樣一個(gè)布局如何實(shí)現(xiàn)呢?

          CSS 漸變幾乎是無所不能的,什么的圖形都能繪制,這里可以拆分一下,兩個(gè)矩形,兩個(gè)圓形,還有兩個(gè)反向圓角,也就是 2 個(gè) 線性漸變,4 個(gè)徑向漸變,示意如下:

          最終實(shí)時(shí)效果如下(上面是原理圖)

          完整代碼如下:

          前篇章已經(jīng)介紹過background-color背景色、background-image背景圖片的使用,在css 中還可以使用漸變作為背景,其控制和性能方面比使用實(shí)際圖像文件更好。如果你還不了解background(背景屬性),可以先看看這篇文章:前端入門——css顏色和背景。

          什么是css 漸變

          CSS 漸變通常是一種顏色淡入到另一種顏色,CSS 允許您控制漸變的方方面面,從方向、形狀再到顏色以及它們?nèi)绾螐囊环N顏色過渡到另一種顏色。實(shí)際上,漸變分為三種類型:

          • 線性漸變(linear-gradient)
          • 徑向漸變(radial-gradient
          • 圓錐漸變(conic-gradient
          • 重復(fù)漸變 —— 使用 repeating-linear-gradient 和 repeating-radial-gradient創(chuàng)建線性和徑向重復(fù)漸變。

          下面是基本語法:

          /* 線性漸變 */
          background-image: linear-gradient(#ff8a00, #e52e71);
          background-image: linear-gradient(to right, violet, darkred, purple);
          background-image: linear-gradient(40deg, rgb(255 0 0) 60%, orange);
          
          /* 徑向漸變 */
          background-image: radial-gradient(#ff8a00, #e52e71);
          background-image: radial-gradient(circle at top right, #ff8a00, red, #e52e71);
          
          /*圓錐漸變 */
          background-image: conic-gradient(#ff8a00, #e52e71);
          background-image: conic-gradient(red 50deg, yellow 100deg, lime 200deg, aqua, blue, magenta, red);

          效果如下:

          下面是重復(fù)漸變:

          /*重復(fù)漸變 */
          background: repeating-linear-gradient(red, yellow 10%, green 15%);
          background: repeating-radial-gradient(red, yellow 10%, green 15%);

          線性重復(fù)漸變

          徑向重復(fù)漸變

          所有的 CSS 漸變類型都是一個(gè)顏色范圍。CSS 漸變產(chǎn)生的顏色可以隨位置不斷變化,從而產(chǎn)生平滑的顏色過渡。也可以創(chuàng)建純色帶和兩種顏色之間的硬過渡。以下內(nèi)容適用于所有漸變函數(shù):

          使用多種顏色

          無需局限于使用兩種顏色,你想使用多少種顏色都可以! 默認(rèn)情況下,所設(shè)置的顏色會(huì)均勻分布在漸變路徑中。

          如下示例:

          顏色終止位置

          你可以通過給每個(gè)顏色設(shè)置 0,1% 或者 2% 或者其他的絕對(duì)數(shù)值來調(diào)整它們的位置。如果你將位置設(shè)置為百分?jǐn)?shù), 0% 表示起始點(diǎn),而 100% 表示終點(diǎn),但是如果需要的話你也可以設(shè)置這個(gè)范圍之外的其他值來達(dá)到你想要的效果。如果有些位置你沒有明確設(shè)置,那么它將會(huì)被自動(dòng)計(jì)算,第一種顏色會(huì)在 0% 處停止,而最后一種顏色是 100%,至于其他顏色則是在它鄰近的兩種顏色的中間停止。

          如下示例:

          創(chuàng)建實(shí)線

          要在兩種顏色之間創(chuàng)建一條硬線,即創(chuàng)建一個(gè)條紋而不是逐漸過渡,可以將相鄰的顏色停止設(shè)置為相同的位置。在此示例中,兩種顏色在 50% 標(biāo)記處共享一個(gè)顏色停止點(diǎn),即漸變得一半:

          改變漸變中心點(diǎn)

          默認(rèn)情況下,漸變會(huì)平滑地從一種顏色過渡到另一種顏色。你可以通過設(shè)置一個(gè)值來將漸變的中心點(diǎn)移動(dòng)到指定位置。 在如下示例中,我們將漸變的中心點(diǎn)由 50% 設(shè)為 10%。

          最后

          以上內(nèi)容,大概介紹了css 漸變所包含的知識(shí)點(diǎn),下面將會(huì)分多篇文章來介紹每種漸變的使用方法,你可以關(guān)注我,繼續(xù)學(xué)習(xí)其它漸變知識(shí)。

          其它相關(guān)文章:

          • css 線性漸變
          • css 徑向漸變
          • css 圓錐漸變
          • css 重復(fù)漸變

          參考資料:

          https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients

          https://css-tricks.com/a-complete-guide-to-css-gradients/


          主站蜘蛛池模板: 国产一区二区精品久久91| 国产另类ts人妖一区二区三区| 亚洲日韩国产欧美一区二区三区 | 亚洲综合一区二区| 国产日韩综合一区二区性色AV| 久久精品道一区二区三区| 午夜视频久久久久一区 | 精品日产一区二区三区手机| 免费一区二区三区四区五区| 无码人妻精品一区二区蜜桃网站 | 午夜视频在线观看一区二区| 亚洲国产国产综合一区首页| www一区二区三区| 波多野结衣中文字幕一区| 久久精品无码一区二区三区不卡 | 东京热无码一区二区三区av| 视频一区二区精品的福利| 国产精品无码一区二区在线 | 日韩一区二区三区免费体验| 3d动漫精品啪啪一区二区免费| 国产精品毛片一区二区三区| 中文字幕无码一区二区三区本日 | 亚洲日韩一区二区三区| 亚洲av无码一区二区三区观看 | 国产亚洲一区二区精品| 亚洲综合无码精品一区二区三区| 精品久久久久一区二区三区| 国产亚洲一区二区三区在线不卡 | 国产Av一区二区精品久久| 精品国产一区二区三区香蕉| 国产对白精品刺激一区二区| 亚洲性无码一区二区三区| 毛片无码一区二区三区a片视频| 久久精品无码一区二区三区免费 | 内射女校花一区二区三区| 精品少妇一区二区三区视频| 色欲AV蜜臀一区二区三区 | 久久久久国产一区二区| 精品一区二区三区免费| 久久精品一区二区三区AV| 日本一区二三区好的精华液 |