使用CSS實(shí)現(xiàn)漸變圓角邊框的效果

讓我們先看如下一個(gè)場景,在這里我們給出了一個(gè)圓角且?guī)в袧u變邊框的按鈕示例。當(dāng)然根據(jù)你的業(yè)務(wù)場景也可以是其它元素,在這里我們使用按鈕來作為切入點(diǎn)。
有沒有發(fā)現(xiàn)在現(xiàn)如今的網(wǎng)站應(yīng)用中,我們大量的使用到這類場景。在解決這類問題時(shí),我們通常想到的是用border-image
但很不幸的是該元素并不支持圓角屬性。為了更確切的還原設(shè)計(jì)稿我們不得不直接使用圖片來處理,那么有沒有辦法只用css來解決呢?答案是有的,就是利用css的mask
與mask-composite
屬性。
css mask and mask-composite
mask:通過遮罩或在特定點(diǎn)剪切圖像來隱藏部分或全部元素。
mask-composite:表示對當(dāng)前蒙版層與其下面的蒙版層使用的合成操作。
使用cssmask-composite
、mask
屬性實(shí)現(xiàn)圓邊框漸角變,不需要復(fù)雜的代碼、SVG 或多個(gè)元素,只需幾行行 CSS 代碼即可。同時(shí)該方式能實(shí)現(xiàn)邊框內(nèi)背景透明,滿足我們高度定制化網(wǎng)站。但仍需要注意的是,該屬性目前兼容性還不是很好,請慎用,查看兼容性:CanIUse
因?yàn)槟壳斑@兩個(gè)CSS屬性兼容性問題,因此在使用這兩個(gè)屬性時(shí)都需要加上
-webkit-
前綴。當(dāng)然這也是目前最簡單的不使用圖片、支持圓角、漸變、背景透明的最佳解決方案。
.css{ padding: 5px 8px; cursor: pointer; position: relative; &::before { /* 1 */ display: block; content: ''; border-radius: 6px; border: 2px solid transparent; background: linear-gradient(90deg, #8f41e9, #578aef) border-box; /* 2 */ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); /* 3 */ -webkit-mask-composite: xor; /* 4 */ mask-composite: exclude; position: absolute; width: 100%; height: 100%; }
解釋:
- 1: 這里需要用到偽元素的原因在于,如果直接在當(dāng)前元素層實(shí)現(xiàn)該css會導(dǎo)致該層內(nèi)內(nèi)容顯示為白色,因此我們需要一個(gè)單獨(dú)的層來實(shí)現(xiàn)漸變圓角邊框。
- 2: 使用漸變作為背景,并將其原點(diǎn)設(shè)為邊框(默認(rèn)情況下為填充框)。
- 3: 使用該mask屬性,我們應(yīng)用兩個(gè)不透明層。底部一層將覆蓋整個(gè)元素,頂部一層僅覆蓋填充框(因此不會覆蓋邊框區(qū)域)
- 4: 我們從底部一層中排除頂層,以便僅顯示邊框區(qū)域
- -webkit-: 有些瀏覽器仍然不支持該屬性,所以我們使用帶前綴的版本
注意:在某些情況下,你可能還需對偽元素增加
z-index:-1
屬性。那么此時(shí)你面要對當(dāng)前元素添加值大于等于0的z-index
屬性。
其它漸變邊框解決方案
以下幾種解決方案除第一個(gè)外,其它都不支持背景透明
border-image
與background-image
類似,在css中已提供border-image
屬性用來專門處理復(fù)雜邊框樣式,我們可以在border中展示image
和linear-gradient
。
.css { border: 2px solid; border-image: linear-gradient(to right, #8f41e9, #578aef) 1; } /* or */ .css { border: 2px solid; border-image-source: linear-gradient(to right, #8f41e9, #578aef); border-image-slice: 1; }
注意:該方法不支持設(shè)置 border-radius,因此只能適用于直角矩形邊框。
偽元素 background-image clip
使用一個(gè)單獨(dú)的元素作為漸變色背景放在最下層,上層設(shè)置一個(gè)透明的 border 和純色的背景(需要設(shè)置 background-clip: padding-box 以避免蓋住下層元素的 border), 上下兩層設(shè)置相同的 border-radius。
當(dāng)然也可以用其它標(biāo)簽元素代替?zhèn)卧?,原理一樣?/p>
.css { border: 2px solid transparent; border-radius: 6px; position: relative; background-color: #fff; background-clip: padding-box; } .css::before { content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; margin: -2px; border-radius: inherit; background: linear-gradient(to right, #8F41E9, #578AEF); }
background-image clip
只需要用到單層元素,為其分別設(shè)置 background-clip、background-origin、background-image 這三個(gè)屬性,每個(gè)屬性設(shè)置兩組值,第一組用于設(shè)置border內(nèi)的單色背景,第二組用于設(shè)置border上的漸變色。
.css { border: 2px solid transparent; border-radius: 6px; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #8f41e9, #578aef); }
到此這篇關(guān)于使用CSS實(shí)現(xiàn)漸變圓角邊框的效果的文章就介紹到這了,更多相關(guān)CSS實(shí)現(xiàn)漸變圓角邊框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 今天給大家分享一個(gè)使用CSS實(shí)現(xiàn)簡單的邊框流光效果,就像和夜晚街上的廣告牌很像,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的2023-09-14
- 今天給大伙帶來的是一個(gè)鋸齒形邊框,類似于傳統(tǒng)郵票的邊框,有一圈鋸齒形狀,其實(shí)看到這種效果,相信很多人第一反應(yīng)是采用偽元素的方式添加小三角形來實(shí)現(xiàn)鋸齒狀,確實(shí)是這2023-09-08
CSS實(shí)現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變效果
這篇文章主要介紹了CSS實(shí)現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變效果,單純用css實(shí)現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變所有效果,因?yàn)閁I沒給背景切圖,尋思這個(gè)理論上用css就能實(shí)現(xiàn)2021-10-27- 本文通過代碼給大家介紹css背景和邊框標(biāo)簽的一些知識,通過相關(guān)屬性設(shè)置背景顏色,背景圖像,對css背景與邊框的相關(guān)知識感興趣的朋友一起看看吧2021-05-21
- 這篇文章主要介紹了css 中多種邊框的實(shí)現(xiàn)小竅門,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2021-04-07
css實(shí)現(xiàn)邊框流動的項(xiàng)目實(shí)踐
邊框流動效果是一種很酷的效果,可以為網(wǎng)頁增添一些動感和活力,本文就來介紹一下css實(shí)現(xiàn)邊框流動的項(xiàng)目實(shí)踐,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-01