CSS 如何實(shí)現(xiàn)羽化效果？

近碰到這樣一個(gè)問(wèn)題，在一張封面上直接顯示書(shū)名，可能會(huì)存在書(shū)名看不太清楚的情況（容易受到背景干擾），如下

image-20221210163633853

為了解決這個(gè)問(wèn)題，設(shè)計(jì)師提了一個(gè)“究極”方案，將書(shū)名背后的圖片模糊一下，這個(gè)在 CSS 中很好實(shí)現(xiàn)，僅需backdrop-filter即可

.name{
  backdrop-filter: blur(10px);
}

當(dāng)然，現(xiàn)在模糊是模糊了，但是邊緣過(guò)于“斷層”，導(dǎo)致書(shū)名和封面有些“格格不入”，效果如下

image-20221210163925282

如果能夠?qū)⑦吘売鸹幌拢摶吘壭Ч涂梢院芎玫貙?shū)名融入到背景當(dāng)中

羽化是photoshop術(shù)語(yǔ)，羽化原理是令選區(qū)內(nèi)外銜接部分虛化，起到漸變的作用從而達(dá)到自然銜接的效果，是ps及其其它版本中的處理圖片的重要工具

這是設(shè)計(jì)最終羽化后的效果，既能保證文字清晰可見(jiàn)，又能避免太過(guò)突兀，如下

image-20221210165427443

設(shè)計(jì)師實(shí)現(xiàn)這個(gè)很簡(jiǎn)單，用橡皮擦擦一下就可以了，那么 CSS 呢？下面來(lái)探討一下 CSS 如何實(shí)現(xiàn)羽化的效果。

一、羽化的原理

羽化其實(shí)就是將邊緣變得模糊，在 CSS 中其實(shí)就是創(chuàng)建一個(gè)邊緣模糊的遮罩（mask），也就是需要一種半透明的漸變。

關(guān)于遮罩，這里簡(jiǎn)單介紹一下，基本語(yǔ)法很簡(jiǎn)單，和background的語(yǔ)法基本一致

.content{
  -webkit-mask: '遮罩圖片' ;
}
/*完整語(yǔ)法*/
.content{
  -webkit-mask: '遮罩圖片' [position] / [size] ;
}

這里的遮罩圖片和背景的使用方式基本一致，可以是PNG圖片、SVG圖片、也可以是漸變繪制的圖片，同時(shí)也支持多圖片疊加。

遮罩的原理很簡(jiǎn)單，最終效果只顯示不透明的部分，透明部分將不可見(jiàn)，半透明類(lèi)推

img

先舉個(gè)圓形的例子，這個(gè)比較簡(jiǎn)單，因?yàn)榭梢灾苯油ㄟ^(guò)徑向漸變創(chuàng)建

比如，下面有一個(gè)頭像，現(xiàn)在直接放在背景上非常突兀

image-20221210172243765

我們可以將這個(gè)頭像通過(guò)徑向漸變繪制出了一個(gè)從不透明到透明的遮罩，達(dá)到和背景融合的效果

.head{
  -webkit-mask: radial-gradient(closest-side circle,#000 60%, transparent 100%);
}

原理是這樣的

image-20221210173118913

最后效果如下

image-20221210172534020

當(dāng)然這是圓形的，如果是矩形的呢？

二、矩形的羽化原理

根據(jù)上面的分析，如果希望羽化矩形邊緣，需要?jiǎng)?chuàng)建這一個(gè)遮罩

image-20221210174740599

那么問(wèn)題來(lái)了，如何創(chuàng)建這一個(gè)邊緣模糊的矩形呢？貌似沒(méi)辦法直接通過(guò)漸變來(lái)實(shí)現(xiàn)，而且還需要是尺寸自適應(yīng)的（自動(dòng)跟隨容器尺寸）

如果單純看這樣一個(gè)矩形，還是很容易實(shí)現(xiàn)的，通過(guò)box-shadow即可實(shí)現(xiàn)

.shadow{
  width: 200px;
  height: 200px;
  background:black;
  border-radius:10px;
  box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
}

根據(jù)需求，**可以多疊加幾層box-shadow**，這里疊加了3層，效果如下

image-20221210175454541

但是問(wèn)題又來(lái)了，這樣一個(gè) dom 無(wú)法直接用作mask-image，那如何處理呢？

三、通過(guò) SVG foreignObject 轉(zhuǎn)換成圖片

上面提到，通過(guò) CSS 陰影可以很輕松的實(shí)現(xiàn)我們說(shuō)需要的效果，但可惜現(xiàn)在還是 dom 階段，所以需要將這個(gè) dom 轉(zhuǎn)換成圖像。

在這里，需要借助 SVG 中的foreignObject[1]元素，通過(guò)這個(gè)元素，可以將 HTML嵌入到SVG中，輕松實(shí)現(xiàn) dom 轉(zhuǎn)圖片的效果

有興趣的可以參考之前這幾篇文章
CSS、SVG、Canvas對(duì)特殊字體的繪制與導(dǎo)出
CSS & SVG foreignObject 實(shí)現(xiàn)文字鏤空波浪動(dòng)畫(huà)

原理如下

回到這里，我們僅需要將上面的結(jié)果放到foreignObject元素中，由于需要自適應(yīng)尺寸，這里的body寬高都是100%，如下

<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
    <body class="wrap" xmlns="http://www.w3.org/1999/xhtml">
      <style>
        .wrap{
          box-sizing: border-box;
          margin: 0;
          height: 100%;
          padding: 10px;
        }
        .shadow{
          height: 100%;
          background:black;
          border-radius:10px;
          box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
        }
      </style>
      <div class="shadow"></div>
    </body>
  </foreignObject>
</svg>

這樣就得到了一個(gè)寬高自適應(yīng)的SVG圖像，無(wú)論寬高怎么變化，都是撐滿的

image-20221210180715580

別看這么多標(biāo)簽，這其實(shí)已經(jīng)是一張圖片，可以直接使用，接下來(lái)看看如何運(yùn)用

四、矩形的羽化

其實(shí)上面得到的 SVG可以直接當(dāng)成一個(gè)圖片資源，正常使用了，就像這樣

.name{
  -webkit-mask: url('./fearher.svg')
}

不過(guò)，也可以將這個(gè)SVG圖片轉(zhuǎn)換成內(nèi)聯(lián)形式，減少資源依賴，轉(zhuǎn)換后仍然保持自適應(yīng)特性

這里推薦張?chǎng)涡窭蠋煹?/span>SVG在線壓縮合并工具 [2]

轉(zhuǎn)換后就是這個(gè)樣子

.name{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cbody class='wrap' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cstyle%3E.wrap%7Bbox-sizing:border-box;margin:0;height:100%25;padding:10px%7D.shadow%7Bheight:100%25;background:%23000;border-radius:10px;box-shadow:0 0 5px %23000,0 0 10px %23000,0 0 15px %23000%7D%3C/style%3E%3Cdiv class='shadow'/%3E%3C/body%3E%3C/foreignObject%3E%3C/svg%3E")
}

效果如下

Kapture 2022-12-10 at 18.23.20

而且由于尺寸是動(dòng)態(tài)的，換個(gè)書(shū)名也能完美適應(yīng)

image-20221210221842455

最后再來(lái)對(duì)比一下，下面哪個(gè)一眼看上去效果最好？

image-20221210183113086

完整代碼可以查看以下任意鏈接

CSS feather (juejin.cn)[3]
CSS feather (codepen.io)[4]
CSS feather (runjs.work)[5]

五、總結(jié)一下

以上就是本文全部?jī)?nèi)容了，一個(gè)還不錯(cuò)的繪制小技巧，最后來(lái)回顧一下一些實(shí)現(xiàn)要點(diǎn)

羽化其實(shí)就是將邊緣變得模糊，在 CSS 中其實(shí)就是創(chuàng)建一個(gè)邊緣模糊的遮罩，也就是需要一種半透明的漸變。
圓形的邊緣很好羽化，因?yàn)閺较驖u變可以直接繪制
矩形的邊緣就稍微復(fù)雜點(diǎn)，因?yàn)椴荒苤苯油ㄟ^(guò)漸變繪制
邊緣模糊在 CSS 中很好實(shí)現(xiàn)，用 box-shadow 就行了
可以通過(guò) SVG foreignObject 將 dom 轉(zhuǎn)換成圖片
SVG 轉(zhuǎn)換成內(nèi)聯(lián)形式，好處是減少資源依賴，轉(zhuǎn)換后仍然保持自適應(yīng)特性

當(dāng)然本文最重要的一點(diǎn)是，如何在 HTML 嚴(yán)重受限的背景上繪制一些常見(jiàn)的圖形，以后碰到類(lèi)似的需求也可以朝這個(gè)方向去考慮，最后，如果覺(jué)得還不錯(cuò)，對(duì)你有幫助的話，歡迎點(diǎn)贊、收藏、轉(zhuǎn)發(fā)???

參考資料

[1]

foreignObject: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

[2]

SVG在線壓縮合并工具 : https://www.zhangxinxu.com/sp/svgo/

[3]

CSS feather (juejin.cn): https://code.juejin.cn/pen/7175466278134480908

[4]

CSS feather (codepen.io): https://codepen.io/xboxyan/pen/ZERZrQw

[5]

CSS feather (runjs.work): https://runjs.work/projects/51eece3c132040f2

言

在數(shù)字世界的浩瀚海洋中，CSS如同一位魔法師，用其強(qiáng)大的魔力將網(wǎng)頁(yè)元素點(diǎn)綴得絢麗多彩。從簡(jiǎn)單的文字排版到復(fù)雜的動(dòng)畫(huà)效果，從單調(diào)的背景色彩到漸變的光影變幻，CSS都以其獨(dú)特的方式賦予網(wǎng)頁(yè)生命力。

今天，我將帶你走進(jìn)CSS的魔法世界，探索那些最實(shí)用、最炫酷的CSS技巧。無(wú)論你是剛剛?cè)腴T(mén)的初學(xué)者，還是經(jīng)驗(yàn)豐富的老手，相信你都能從中獲得啟發(fā)和靈感，讓你的網(wǎng)頁(yè)設(shè)計(jì)更加出色！

接下來(lái)，就讓我們一起踏上這場(chǎng)充滿魔力的CSS之旅吧！

以下是10個(gè)高級(jí)的CSS技巧，并附有相應(yīng)的代碼示例：

1. 使用 CSS 變量

CSS 變量（也稱(chēng)為 CSS 自定義屬性）允許你在一個(gè)集中的位置定義一組值，然后在整個(gè)文檔或項(xiàng)目中多次引用這些值。

:root {
  --main-color: #007BFF;
}

.button {
  background-color: var(--main-color);
  color: white;
}

2. CSS Grid 布局

CSS Grid 是一個(gè)二維布局系統(tǒng)，可以同時(shí)處理行和列。它非常適合構(gòu)建復(fù)雜的網(wǎng)頁(yè)布局。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 200px;
}

3. CSS Flexbox 布局

Flexbox 是一個(gè)一維布局模型，主要用于處理行內(nèi)元素的布局、對(duì)齊和分布空間。

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

4. CSS 偽元素和偽類(lèi)

偽元素（如 ::before 和 ::after）和偽類(lèi)（如 :hover 和 :focus）提供了更多的樣式和控制能力。

a::after {
  content: " →";
}

input:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

5. CSS 混合模式 (Blend Modes)

混合模式允許你定義元素如何與其背景或相鄰元素混合。

.blend-mode {
  background-color: red;
  mix-blend-mode: multiply;
}

6. CSS 濾鏡 (Filters)

CSS 濾鏡可以對(duì)元素應(yīng)用圖形效果，如模糊、亮度、對(duì)比度等。

img {
  filter: grayscale(100%);
}

7. CSS 滾動(dòng)捕捉 (Scroll Snap)

滾動(dòng)捕捉允許你創(chuàng)建滾動(dòng)視圖，其中的滾動(dòng)停止位置可以“捕捉”到元素的特定位置。

.scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 300px;
}

.scroll-item {
  scroll-snap-align: start;
  height: 100%;
  /* 其他樣式 */
}

8. CSS 形狀裁剪 (Clip-Path)

clip-path 屬性允許你創(chuàng)建復(fù)雜的裁剪區(qū)域。

.clipped {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

9. CSS 遮罩 (Masking)

CSS 遮罩允許你使用圖像或漸變作為遮罩層，從而只顯示元素的特定部分。

.masked {
  -webkit-mask-image: url('mask.png');
  mask-image: url('mask.png');
}

10. CSS 滾動(dòng)條樣式化

雖然直接樣式化滾動(dòng)條的支持有限，但你可以使用偽元素和瀏覽器特定的屬性來(lái)嘗試自定義滾動(dòng)條的外觀。

/* Webkit-based browsers */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

請(qǐng)注意，一些高級(jí)技巧（如滾動(dòng)捕捉、形狀裁剪和遮罩）可能在一些舊版瀏覽器或特定瀏覽器上不受支持。在使用這些技巧時(shí)，請(qǐng)確保測(cè)試你的設(shè)計(jì)在所有目標(biāo)瀏覽器上都能正常工作。

言

目前大多數(shù)人對(duì)于CSS的使用只是停留在基本層面，設(shè)置位置，寬高，背景色等等。但是CSS還有很多的高級(jí)使用技巧，在開(kāi)發(fā)時(shí)省去很多時(shí)間。

今天我們就一起來(lái)看看CSS中的一些高級(jí)使用技巧，讓你的頁(yè)面更加的炫酷吧。

CSS

黑白圖片

如何將一張彩色的圖片在頁(yè)面上展示成黑白圖片呢？

我們需要用到一個(gè)filter屬性，在webkit中，-webkit-filter專(zhuān)門(mén)為元素的渲染提供一些效果，比如灰度，亮度，模糊等。

使用灰度控制grayscale屬性，就可以很容易的將圖片置為黑白色。

我們看到下面一張圖片。

原始圖片

當(dāng)我們加上以下一段代碼后。

CSS代碼

可以看到圖片如下所示。

處理過(guò)的圖片

整個(gè)頁(yè)面添加頂部陰影

有的時(shí)候我們將網(wǎng)頁(yè)的頂部設(shè)置為陰影效果，這個(gè)是怎么做到的呢？

利用body的偽元素:before，可以減少額外的元素。
在頂部增加一個(gè)div，設(shè)置一個(gè)高度，寬度為100%
將其position設(shè)置為fixed，然后設(shè)置偏移量為設(shè)定的高度值。
設(shè)置box-shadow屬性，值等于設(shè)定的高度值。

得到的代碼如下所示。

頁(yè)面頂部加陰影

運(yùn)行完上述代碼后，就可以看到整個(gè)頁(yè)面頂部有陰影的效果。

所有元素垂直居中

假如有一個(gè)很簡(jiǎn)單的頁(yè)面，需要所有的元素都垂直居中顯示，實(shí)現(xiàn)的方法其實(shí)很簡(jiǎn)單。

將與align有關(guān)的屬性設(shè)置為center。
displag設(shè)置為flex。

得到的代碼如下所示。

垂直居中的CSS方法

設(shè)置以后，我們可以看到不管將窗口設(shè)置為多高，所有元素都是垂直居中的狀態(tài)。

但是這種方法有個(gè)弊端，就是會(huì)將所有元素水平排列，垂直居中，頁(yè)面元素過(guò)多時(shí)，頁(yè)面會(huì)被水平撐開(kāi)，不太美觀。

因此這種方法建議在頁(yè)面元素少的情況下使用。

元素垂直居中

負(fù)數(shù)的nth-child選擇器

在一個(gè)使用ul>li創(chuàng)建的列表中，如果想要選擇其中的幾個(gè)元素，我們可以使用nth-child選擇器，例如:nth-child(1)代表第一個(gè)元素。

那么假如我們想選擇第一個(gè)到第三個(gè)元素，使用nth-child該怎么做呢？

很多人第一選擇是:nth-child(1)，:nth-child(2)，:nth-child(3)，然后設(shè)置屬性。

其實(shí)還有一種更簡(jiǎn)單的方法，那就是使用負(fù)數(shù)選擇器。

:nth-child(-n+3)，就代表選擇從第一個(gè)到第三個(gè)元素。

我們可以通過(guò)以下例子測(cè)試，首先在看看頁(yè)面的HTML代碼，并將它們的display全部設(shè)置為none，這樣就可以將li全部隱藏起來(lái)。

HTML代碼

然后通過(guò)nth-child選擇器設(shè)置css屬性。

nth-child選擇器

最后看看頁(yè)面上的內(nèi)容呈現(xiàn)，可以看出實(shí)際選中的li只有前三個(gè)，符合預(yù)期。

頁(yè)面內(nèi)容

表格列等寬

頁(yè)面的table元素，如果不對(duì)tr>td設(shè)置寬度，列td的寬度是會(huì)隨著內(nèi)容的變化而變化，這樣就會(huì)造成頁(yè)面布局很難看。

我們可以將表格的每列設(shè)置成相同的寬度，這樣不管內(nèi)容怎么變化都不會(huì)改變頁(yè)面的布局。

只需要使用如下一個(gè)屬性即可。

表格列等寬

實(shí)際的效果如下圖所示。

表格列等寬

CSS3中的calc()

在CSS3中新增了一個(gè)calc()方法，用于動(dòng)態(tài)的計(jì)算值，不管是數(shù)值還是百分比，都可以參與計(jì)算。

這個(gè)方法非常適用于自適應(yīng)的容器中，動(dòng)態(tài)計(jì)算寬高，間距(margin,padding)，邊框(border)等值，這樣在容器大小變化的時(shí)候，不會(huì)改變?cè)刂g的布局。

例如以下我們定義的兩個(gè)div。

CSS屬性

看到的頁(yè)面效果如下圖所示。

calc()效果

禁用鼠標(biāo)

假設(shè)在頁(yè)面上有一個(gè)很重要的區(qū)域，只是只讀的，不能讓鼠標(biāo)點(diǎn)擊，可以直接禁用掉鼠標(biāo)點(diǎn)擊事件。

這個(gè)在CSS3中新增了pointer-event屬性，只要將其設(shè)置為none即可。

禁用鼠標(biāo)點(diǎn)擊

漸變文本

有的時(shí)候我們可以看到頁(yè)面上有一些文字漸變的效果，如下圖所示。

漸變文字

這個(gè)效果是怎么實(shí)現(xiàn)的呢?

通過(guò)設(shè)置偽元素，然后在偽元素中使用-webkit-mask-image屬性，這個(gè)屬性是專(zhuān)門(mén)用來(lái)產(chǎn)生遮罩效果的。

然后將遮罩效果的字與原來(lái)的文章重合，就可以達(dá)到上述效果。

我們?cè)O(shè)置一個(gè)h2標(biāo)簽，然后設(shè)置data-text屬性，date-text屬性值與頁(yè)面顯示值一樣。

HTML元素

然后設(shè)置對(duì)應(yīng)的CSS屬性。

CSS屬性

當(dāng)我們?cè)陧?yè)面運(yùn)行后，我們就可以得到上面的文字漸變效果。

模糊文本

和上面的漸變文本類(lèi)似，模糊文本也有專(zhuān)門(mén)的屬性可以設(shè)置，那就是text-shadow。

通過(guò)下面一段簡(jiǎn)單的代碼，就可以得到模糊文本了。

模糊文本樣式

得到的效果如下圖所示。

模糊文本

結(jié)束語(yǔ)

今天這篇文章主要介紹了CSS中幾個(gè)高級(jí)的使用技巧，可以讓你在實(shí)現(xiàn)相同效果時(shí)，減少很多的代碼量，提高工作效率。

大家要好好掌握~

在線咨詢

上一篇：第46節(jié) HTML5擴(kuò)展-Javascript-零點(diǎn)程序員
下一篇：html基礎(chǔ)（一）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

CSS 如何實(shí)現(xiàn)羽化效果？

一、羽化的原理

二、矩形的羽化原理

三、通過(guò) SVG foreignObject 轉(zhuǎn)換成圖片

四、矩形的羽化

五、總結(jié)一下

參考資料

言

1. 使用 CSS 變量

2. CSS Grid 布局

3. CSS Flexbox 布局

4. CSS 偽元素和偽類(lèi)

5. CSS 混合模式 (Blend Modes)

6. CSS 濾鏡 (Filters)

7. CSS 滾動(dòng)捕捉 (Scroll Snap)

8. CSS 形狀裁剪 (Clip-Path)

9. CSS 遮罩 (Masking)

10. CSS 滾動(dòng)條樣式化

言

黑白圖片

整個(gè)頁(yè)面添加頂部陰影

所有元素垂直居中

負(fù)數(shù)的nth-child選擇器

表格列等寬

CSS3中的calc()

禁用鼠標(biāo)

漸變文本

模糊文本

結(jié)束語(yǔ)

您的項(xiàng)目需求