讓我們先看如下一個(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)文章，希望大家以后多多支持腳本之家！

最新評論