CSS 如何實現羽化效果？

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

image-20221210163633853

為了解決這個問題，設計師提了一個“究極”方案，將書名背后的圖片模糊一下，這個在 CSS 中很好實現，僅需backdrop-filter即可

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

當然，現在模糊是模糊了，但是邊緣過于“斷層”，導致書名和封面有些“格格不入”，效果如下

image-20221210163925282

如果能夠將邊緣羽化一下，虛化邊緣效果，就可以很好地將書名融入到背景當中

羽化是photoshop術語，羽化原理是令選區內外銜接部分虛化，起到漸變的作用從而達到自然銜接的效果，是ps及其其它版本中的處理圖片的重要工具

這是設計最終羽化后的效果，既能保證文字清晰可見，又能避免太過突兀，如下

image-20221210165427443

設計師實現這個很簡單，用橡皮擦擦一下就可以了，那么 CSS 呢？下面來探討一下 CSS 如何實現羽化的效果。

一、羽化的原理

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

關于遮罩，這里簡單介紹一下，基本語法很簡單，和background的語法基本一致

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

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

遮罩的原理很簡單，最終效果只顯示不透明的部分，透明部分將不可見，半透明類推

img

先舉個圓形的例子，這個比較簡單，因為可以直接通過徑向漸變創建

比如，下面有一個頭像，現在直接放在背景上非常突兀

image-20221210172243765

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

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

原理是這樣的

image-20221210173118913

最后效果如下

image-20221210172534020

當然這是圓形的，如果是矩形的呢？

二、矩形的羽化原理

根據上面的分析，如果希望羽化矩形邊緣，需要創建這一個遮罩

image-20221210174740599

那么問題來了，如何創建這一個邊緣模糊的矩形呢？貌似沒辦法直接通過漸變來實現，而且還需要是尺寸自適應的（自動跟隨容器尺寸）

如果單純看這樣一個矩形，還是很容易實現的，通過box-shadow即可實現

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

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

image-20221210175454541

但是問題又來了，這樣一個 dom 無法直接用作mask-image，那如何處理呢？

三、通過 SVG foreignObject 轉換成圖片

上面提到，通過 CSS 陰影可以很輕松的實現我們說需要的效果，但可惜現在還是 dom 階段，所以需要將這個 dom 轉換成圖像。

在這里，需要借助 SVG 中的foreignObject[1]元素，通過這個元素，可以將 HTML嵌入到SVG中，輕松實現 dom 轉圖片的效果

有興趣的可以參考之前這幾篇文章
CSS、SVG、Canvas對特殊字體的繪制與導出
CSS & SVG foreignObject 實現文字鏤空波浪動畫

原理如下

回到這里，我們僅需要將上面的結果放到foreignObject元素中，由于需要自適應尺寸，這里的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>

這樣就得到了一個寬高自適應的SVG圖像，無論寬高怎么變化，都是撐滿的

image-20221210180715580

別看這么多標簽，這其實已經是一張圖片，可以直接使用，接下來看看如何運用

四、矩形的羽化

其實上面得到的 SVG可以直接當成一個圖片資源，正常使用了，就像這樣

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

不過，也可以將這個SVG圖片轉換成內聯形式，減少資源依賴，轉換后仍然保持自適應特性

這里推薦張鑫旭老師的SVG在線壓縮合并工具 [2]

轉換后就是這個樣子

.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

而且由于尺寸是動態的，換個書名也能完美適應

image-20221210221842455

最后再來對比一下，下面哪個一眼看上去效果最好？

image-20221210183113086

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

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

五、總結一下

以上就是本文全部內容了，一個還不錯的繪制小技巧，最后來回顧一下一些實現要點

羽化其實就是將邊緣變得模糊，在 CSS 中其實就是創建一個邊緣模糊的遮罩，也就是需要一種半透明的漸變。
圓形的邊緣很好羽化，因為徑向漸變可以直接繪制
矩形的邊緣就稍微復雜點，因為不能直接通過漸變繪制
邊緣模糊在 CSS 中很好實現，用 box-shadow 就行了
可以通過 SVG foreignObject 將 dom 轉換成圖片
SVG 轉換成內聯形式，好處是減少資源依賴，轉換后仍然保持自適應特性

當然本文最重要的一點是，如何在 HTML 嚴重受限的背景上繪制一些常見的圖形，以后碰到類似的需求也可以朝這個方向去考慮，最后，如果覺得還不錯，對你有幫助的話，歡迎點贊、收藏、轉發???

參考資料

[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

言

在數字世界的浩瀚海洋中，CSS如同一位魔法師，用其強大的魔力將網頁元素點綴得絢麗多彩。從簡單的文字排版到復雜的動畫效果，從單調的背景色彩到漸變的光影變幻，CSS都以其獨特的方式賦予網頁生命力。

今天，我將帶你走進CSS的魔法世界，探索那些最實用、最炫酷的CSS技巧。無論你是剛剛入門的初學者，還是經驗豐富的老手，相信你都能從中獲得啟發和靈感，讓你的網頁設計更加出色！

接下來，就讓我們一起踏上這場充滿魔力的CSS之旅吧！

以下是10個高級的CSS技巧，并附有相應的代碼示例：

1. 使用 CSS 變量

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

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

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

2. CSS Grid 布局

CSS Grid 是一個二維布局系統，可以同時處理行和列。它非常適合構建復雜的網頁布局。

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

3. CSS Flexbox 布局

Flexbox 是一個一維布局模型，主要用于處理行內元素的布局、對齊和分布空間。

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

4. CSS 偽元素和偽類

偽元素（如 ::before 和 ::after）和偽類（如 :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 濾鏡可以對元素應用圖形效果，如模糊、亮度、對比度等。

img {
  filter: grayscale(100%);
}

7. CSS 滾動捕捉 (Scroll Snap)

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

.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 屬性允許你創建復雜的裁剪區域。

.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 滾動條樣式化

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

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

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

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

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

請注意，一些高級技巧（如滾動捕捉、形狀裁剪和遮罩）可能在一些舊版瀏覽器或特定瀏覽器上不受支持。在使用這些技巧時，請確保測試你的設計在所有目標瀏覽器上都能正常工作。

言

目前大多數人對于CSS的使用只是停留在基本層面，設置位置，寬高，背景色等等。但是CSS還有很多的高級使用技巧，在開發時省去很多時間。

今天我們就一起來看看CSS中的一些高級使用技巧，讓你的頁面更加的炫酷吧。

CSS

黑白圖片

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

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

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

我們看到下面一張圖片。

原始圖片

當我們加上以下一段代碼后。

CSS代碼

可以看到圖片如下所示。

處理過的圖片

整個頁面添加頂部陰影

有的時候我們將網頁的頂部設置為陰影效果，這個是怎么做到的呢？

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

得到的代碼如下所示。

頁面頂部加陰影

運行完上述代碼后，就可以看到整個頁面頂部有陰影的效果。

所有元素垂直居中

假如有一個很簡單的頁面，需要所有的元素都垂直居中顯示，實現的方法其實很簡單。

將與align有關的屬性設置為center。
displag設置為flex。

得到的代碼如下所示。

垂直居中的CSS方法

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

但是這種方法有個弊端，就是會將所有元素水平排列，垂直居中，頁面元素過多時，頁面會被水平撐開，不太美觀。

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

元素垂直居中

負數的nth-child選擇器

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

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

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

其實還有一種更簡單的方法，那就是使用負數選擇器。

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

我們可以通過以下例子測試，首先在看看頁面的HTML代碼，并將它們的display全部設置為none，這樣就可以將li全部隱藏起來。

HTML代碼

然后通過nth-child選擇器設置css屬性。

nth-child選擇器

最后看看頁面上的內容呈現，可以看出實際選中的li只有前三個，符合預期。

頁面內容

表格列等寬

頁面的table元素，如果不對tr>td設置寬度，列td的寬度是會隨著內容的變化而變化，這樣就會造成頁面布局很難看。

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

只需要使用如下一個屬性即可。

表格列等寬

實際的效果如下圖所示。

表格列等寬

CSS3中的calc()

在CSS3中新增了一個calc()方法，用于動態的計算值，不管是數值還是百分比，都可以參與計算。

這個方法非常適用于自適應的容器中，動態計算寬高，間距(margin,padding)，邊框(border)等值，這樣在容器大小變化的時候，不會改變元素之間的布局。

例如以下我們定義的兩個div。

CSS屬性

看到的頁面效果如下圖所示。

calc()效果

禁用鼠標

假設在頁面上有一個很重要的區域，只是只讀的，不能讓鼠標點擊，可以直接禁用掉鼠標點擊事件。

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

禁用鼠標點擊

漸變文本

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

漸變文字

這個效果是怎么實現的呢?

通過設置偽元素，然后在偽元素中使用-webkit-mask-image屬性，這個屬性是專門用來產生遮罩效果的。

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

我們設置一個h2標簽，然后設置data-text屬性，date-text屬性值與頁面顯示值一樣。

HTML元素

然后設置對應的CSS屬性。

CSS屬性

當我們在頁面運行后，我們就可以得到上面的文字漸變效果。

模糊文本

和上面的漸變文本類似，模糊文本也有專門的屬性可以設置，那就是text-shadow。

通過下面一段簡單的代碼，就可以得到模糊文本了。

模糊文本樣式

得到的效果如下圖所示。

模糊文本

結束語

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

大家要好好掌握~

在線咨詢

上一篇：第46節 HTML5擴展-Javascript-零點程序員
下一篇：html基礎（一）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS 如何實現羽化效果？

一、羽化的原理

二、矩形的羽化原理

三、通過 SVG foreignObject 轉換成圖片

四、矩形的羽化

五、總結一下

參考資料

言

1. 使用 CSS 變量

2. CSS Grid 布局

3. CSS Flexbox 布局

4. CSS 偽元素和偽類

5. CSS 混合模式 (Blend Modes)

6. CSS 濾鏡 (Filters)

7. CSS 滾動捕捉 (Scroll Snap)

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

9. CSS 遮罩 (Masking)

10. CSS 滾動條樣式化

言

黑白圖片

整個頁面添加頂部陰影

所有元素垂直居中

負數的nth-child選擇器

表格列等寬

CSS3中的calc()

禁用鼠標

漸變文本

模糊文本

結束語

您的項目需求