欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時(shí)間:2023-10-12 16:02:33   作者:Qhan   我要評論
這篇文章給大家介紹了如何使用CSS實(shí)現(xiàn)漸變圓角邊框的效果,有沒有發(fā)現(xiàn)在現(xiàn)如今的網(wǎng)站應(yīng)用中,我們大量的使用到這類場景,在解決這類問題時(shí),我們利用了css的mask與mask-composite屬性

讓我們先看如下一個(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的maskmask-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中展示imagelinear-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)文章

  • 使用CSS實(shí)現(xiàn)簡單的邊框流光效果

    今天給大家分享一個(gè)使用CSS實(shí)現(xiàn)簡單的邊框流光效果,就像和夜晚街上的廣告牌很像,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的
    2023-09-14
  • 使用CSS實(shí)現(xiàn)鋸齒形邊框的示例代碼

    今天給大伙帶來的是一個(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)簽實(shí)例詳解

    本文通過代碼給大家介紹css背景和邊框標(biāo)簽的一些知識,通過相關(guān)屬性設(shè)置背景顏色,背景圖像,對css背景與邊框的相關(guān)知識感興趣的朋友一起看看吧
    2021-05-21
  • css 中多種邊框的實(shí)現(xiàn)小竅門

    這篇文章主要介紹了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

最新評論