圓角大殺器，使用濾鏡構建圓角及波浪效果！

来源:https://www.cnblogs.com/coco1s/archive/2022/07/25/16516585.html
-Advertisement-
Play Games

本文，將另闢蹊徑，介紹一種使用濾鏡去構建圓角的獨特方式。 首先，我們來看這樣一個圖形： 一個矩形，沒什麼特別的，代碼如下： div { width: 200px; height: 40px; background-color: #000; } 如果，我們現在需要給這個矩形的兩端加上圓角，像是這樣，該 ...


本文，將另闢蹊徑，介紹一種使用濾鏡去構建圓角的獨特方式。

首先，我們來看這樣一個圖形：

一個矩形，沒什麼特別的，代碼如下：

div {
    width: 200px;
    height: 40px;
    background-color: #000;
}

如果，我們現在需要給這個矩形的兩端加上圓角，像是這樣，該怎麼做呢：

So easy，不過就是加個 border-radius 而已：

div {
    width: 200px;
    height: 40px;
  + border-radius: 40px;
    background-color: #000;
}

好，那如果，不再是直線，而是一條曲線，希望曲線兩端，帶有圓角，像是這樣，又該怎麼辦呢：

image

到這，基本上觸及了傳統 CSS 的天花板，想通過一個屬性搞定這個效果是不太可能了。

當然，有這樣一種方式，通過首尾兩端，利用兩個偽元素，實現兩個圓形，疊加上去：

emm，這也是一個可行的方案，主要是定位會稍微有點點麻煩。那麼除了這個方式以及直接使用 SVG 外，還有沒有其他方法能夠實現帶圓角的曲線？

有！在 CSS 中，我們還可以通過 filter: contrast() 配合 filter: blur() 這對組合來實現這個圖形。

filter: contrast() 配合 filter: blur() 的奇妙化學作用

在 神奇的濾鏡！巧妙實現內凹的平滑圓角 一文中，其實已經介紹過這個組合的另類用法。

經常閱讀我的文章的小伙伴，對 filter: contrast() 配合 filter: blur() 的組合一定不陌生，上經典的一張圖：

單獨將兩個濾鏡拿出來，它們的作用分別是：

  1. filter: blur()： 給圖像設置高斯模糊效果。
  2. filter: contrast()： 調整圖像的對比度。

但是，當他們“合體”的時候，產生了奇妙的融合現象。

仔細看兩圓相交的過程，在邊與邊接觸的時候，會產生一種邊界融合的效果，通過對比度濾鏡把高斯模糊的模糊邊緣給幹掉，利用高斯模糊實現融合效果。

當然，重點來了，blur 與 contrast 濾鏡的組合不僅能用於這種融合效果，其特殊的性質使得它們的組合可以將直角變成圓角！

先看看之前的一個例子：

首先，我們只需要實現這樣一個圖形：

<div class="g-container">
    <div class="g-content">
        <div class="g-filter"></div>
    </div>
</div>

.g-container {
    position: relative;
    width: 300px;
    height: 100px;
    
    .g-content {
        height: 100px;
        
        .g-filter {
            height: 100px;
            background: radial-gradient(circle at 50% -10px, transparent 0, transparent 39px, #000 40px, #000);
        }
    }
}

得到這樣一個簡單的圖形：

看到這裡，肯定會疑惑，為什麼這個圖形需要用 3 層 div 嵌套的方式？不是一個 div 就足夠了嗎？

是因為我們又要運用 filter: contrast() 和 filter: blur() 這對神奇的組合。

我們簡單改造一下上述代碼，仔細觀察和上述 CSS 的異同：

.g-container {
    position: relative;
    width: 300px;
    height: 100px;
    
    .g-content {
        height: 100px;
        filter: contrast(20);
        background-color: white;
        overflow: hidden;
        
        .g-filter {
            filter: blur(10px);
            height: 100px;
            background: radial-gradient(circle at 50% -10px, transparent 0, transparent 29px, #000 40px, #000);
        }
    }
}

我們給 .g-content 添加了 filter: contrast(20) 和 background-color: white，給 .g-filter 添加了 filter: blur(10px)。

神奇的事情發生了，我們得到了這樣一個效果：

通過對比度濾鏡把高斯模糊的模糊邊緣給幹掉，將原本的直角，變成了圓角，Amazing。

通過一個 Gif 圖更直觀的感受：


完整的代碼你可以戳這裡：CodePen Demo - Smooth concave rounded corners By filter

通過濾鏡實現圓角圓弧

到這裡，你應該知道如何通過直角圓弧得到圓角圓弧了。就是藉助 filter: contrast() 配合 filter: blur() 的組合。

直接上代碼：

div {
    position: relative;
    width: 250px;
    height: 250px;
    filter: contrast(20);
    background-color: #fff;
    overflow: hidden;
}
div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    filter: blur(7px);
    border: 25px solid transparent;
    border-bottom: 25px solid #000;
    border-radius: 50%;
}

效果如下：

通過 Gif 看，更加直觀：

CodePen Demo -- Arc with rounded corners

使用 filter: contrast() 配合 filter: blur() 實現波浪效果

好了，有了上面的鋪墊，我們再來看一個有意思的。使用 filter: contrast() 配合 filter: blur() 實現波浪效果。

在之前，我們如果想使用純 CSS，實現下述的波浪效果，是非常的困難的：

這種波浪效果，通常會使用在優惠券等切圖中：

在之前，我們是怎麼去做的呢？如果不切圖，使用純 CSS 的話，需要使用兩層漸變進行疊加，大概是這樣，感受一下：

bgg2

其代碼也比較複雜，需要不斷的調試漸變，使兩個徑向漸變吻合：

div {
    position: relative;
    width: 400px;
    height: 160px;
    background: linear-gradient(90deg, #945700 0%, #f49714 100%);
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom :0;
    }
    &::before {
        width: 10px;
        background-image: radial-gradient(circle at -5px 10px, transparent 12px, #fff 13px, #fff 0px);
        background-size: 20px 20px;
        background-position: 0 15px;
    }
    &::after {
        width: 15px;
        background-image: radial-gradient(circle at 15px 10px, #fff 12px, transparent 13px, transparent 0px);
        background-size: 20px 40px;
        background-position: 0 15px;
    }
}

那麼，如果使用 filter: contrast() 配合 filter: blur() 的話，整個過程將會變得非常簡單。

我們只需要實現這樣一個圖形：

這個圖形使用漸變是容易得到的：

div {
    background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px);
    background-size: 80px 100%;
}

按照上文介紹的技巧，只需要應用上 filter: contrast() 配合 filter: blur()，就能將銳利的直角轉化成圓角。我們嘗試一下：

<div class="g-container">
    <div class="g-inner"></div>
</div>

.g-container {
    position: relative;
    margin: auto;
    height: 200px;
    padding-top: 100px;
    filter: contrast(20);
    background-color: #fff;
    overflow: hidden;
}

.g-inner {
    position: relative;
    height: 200px;
    background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px);
    background-size: 80px 100%;
    filter: blur(10px)
}

可以寫在 1 個 DIV 裡面（通過元素和它的偽元素構造父子關係），也可以用 2 個，都可以，問題不大。

得到如下所示的波浪圖形：

我們希望它波浪的地方的確是波了，但是我們不希望的地方，它也變成了圓角：

這是 filter: blur() 的一個問題，好在，我們是可以使用 backdrop-filter() 去規避掉這個問題的，我們簡單改造下代碼：

.g-container {
    position: relative;
    width: 380px;
    padding-top: 100px;
    filter: contrast(20);
    background-color: #fff;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        backdrop-filter: blur(10px);
        z-index: 1;
    }
}
.g-inner {
    position: relative;
    width: 380px;
    height: 100px;
    background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px);
    background-size: 80px 100%;
}

這樣，我們就實現了一份完美的波浪效果：

部分同學可能對上面的 padding-top 100px 有所疑惑，這個也是目前我所發現的一個 BUG，暫未解決，不影響使用，你可以嘗試將 padding-top: 100px 替換成 height: 100px。

基於這種方式實現的波浪效果，我們甚至可以給它加上動畫，讓他動起來，也非常的好做，簡單改造下代碼：

.g-inner {
    position: relative;
  - width: 380px;
  + width: 480px;
    height: 100px;
    background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px);
    background-size: 80px 100%;
  + animation: move 1s infinite linear; 
}

@keyframes move {
    100% {
        transform: translate(-80px, 0);
    }
}

通過一個簡單的位移動畫，並且使之首尾幀一致，看上去就是連續的：

完整的代碼，你可以戳這裡：CodePen Demo -- Pure CSS Wave

SVG 濾鏡，讓使用更簡單

這就結束了嗎？沒有！上述雙濾鏡的組合固然強大，確實還是有一點麻煩。

再補充一種 SVG 濾鏡的方案。這裡，對於大部分場景，我們可以藉助 SVG 濾鏡，在 CSS 中一行引入，實現同樣的功能。

看這樣一個 DEMO，我們有這樣一個三角形：

我們想通過它得到一個圓角三角形：

藉助 SVG 濾鏡，其實也可以快速達成，省去了上面還需要疊加一個 filter: contrast() 的煩惱：

<div class="g-triangle"></div>
<svg width="0">
    <filter id="blur" color-interpolation-filters="sRGB">
      <feGaussianBlur stdDeviation="10" />
      <feComponentTransfer>
          <feFuncA type="table" tableValues="0 0 10"/>
      </feComponentTransfer>
    </filter>
</svg>

div {
        border: 60px solid transparent;
        border-left: 120px solid #f48;
        filter: url(#blur);
}

效果如下：

是的，利用 filter: url(xxx) 可以快速引入一個定義好的 SVG 濾鏡。也可以這樣，直接嵌入到 URL 中：

div {
        border: 60px solid transparent;
        border-left: 120px solid #f48;
        filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='blur' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 10'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/svg%3E#blur");
}

完整的代碼，你可以戳這裡：CodePen Demo -- triangle with rounded corners and shadow

總結一下

本文介紹了一種使用 filter: contrast() 配合 filter: blur() 的方式，將直角圖形變為圓角圖形的方式，在一些特定的場景下，可能有著妙用。同時，在很多場景下，可以使用 SVG 濾鏡簡化操作。

不過，這種方式也有幾個小缺陷：

  1. 使用了 filter: contrast() 之後，圖形的尺寸可能相對而言會縮小一點點，要達到固定所需尺寸的話，要一定的調試
  2. 此方式產生的圖形，畢竟經過了一次 filter: blur()，放大來看圖形會有一定的鋸齒，可以通過調整 contrast 和 blur 的大小儘可能的去除，但是沒法完全去掉

當然，我覺得這兩個小缺點瑕不掩瑜，在特定的場景下，此方式還是有一定的用武之地的。

最後

本文到此結束，希望對你有幫助

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL實戰45講 14
    14 | count(*)這麼慢，我該怎麼辦？ 在開發系統的時候，你可能經常需要計算一個表的行數，比如一個交易系統的所有變更記錄總數。 隨著系統中記錄數越來越多，select count(*) from t 語句執行得也會越來越慢 count(*) 的實現方式 在不同的 MySQL 引擎中，coun ...
  • 騰訊雲資料庫的可信可控之路
    7月22日，中國信息通信研究院、中國通信標準化協會主辦的“2022 可信雲大會”在京圓滿落幕。大會以“雲賦新能，算向未來”為主題，邀請了眾多行業專家學者、企業代表、行業大咖齊聚一堂，從雲治理、容災、多雲管理、雲原生等多個雲計算垂直領域出發，共話我國可信計算未來藍圖。 騰訊雲資料庫專家團作為雲服務企業 ...
  • 推薦系統-協同過濾在Spark中的實現
    本文以經典的協同過濾為切入點，重點介紹了被工業界廣泛使用的矩陣分解演算法，從理論與實踐兩個維度介紹了該演算法的原理，通俗易懂，希望能夠給大家帶來一些啟發。 ...
  • 移動web佈局方法
    繼續更新移動端的一個佈局，這也是經典中的經典，當初只知道個rem和vwvh適配，其實這裡面還有很多的門道不只是一個適配這麼簡單 一.前置 1.背景縮放 我們都知道做移動端，給的圖都是二倍圖，你拿來用直接縮減一半，這樣在手機上顯示出來也會很清晰 那麼我們背景圖片怎麼來進行縮放呢 ==推薦一個多倍圖切圖 ...
  • 如何獲取廣告服務流量變現數據，助力廣告效果分析？
    廣告服務（Ads Kit）提供流量變現服務，通過該服務開發者可以在自己的App中向用戶展示Banner、原生、激勵廣告等多種形式的廣告內容。而對於應用中已上線的廣告位來說，因為涉及到收入，所以日常的數據監控顯得尤為重要。 為此廣告服務也提供了流量變現服務報表API（Publisher Service ...
  • 安卓系統使用USB轉串口
    概述 安卓系統支持多種 USB 外圍設備，提供兩種模式來支持實現 USB 外設接入系統：USB 配件模式和 USB 主機模式。 在 USB 配件模式下，接入的 USB 設備充當 USB 主機，併為 USB 匯流排供電。USB 配件產品包括USB轉接設備、診斷和音樂設備、讀卡器等，遵循 Android ...
  • 初識Js-Day1
    初識Js 1.前言 學習js的第一天，簡單瞭解了一下JS的誕生歷史，JS相關變數，關鍵字，命名規範，JS數據類型以及各種數據類型之間的轉換，JS運算符的使用，二進位，八進位，十進位，十六進位之間的換算。 2.JS的誕生歷史 1.JavaScript誕生於1995年，由Netscape（網景公司）研發 ...
  • 基於 Hexo 鍵入搜索功能
    原文鏈接： 基於 Hexo 鍵入搜索功能 前言 本站基於Hexo搭建，用的 🦋 hexo-theme-butterfly 主題 v3.7.1，請註意最新的🦋 hexo-theme-butterfly 版本已經更新到 v4.2.2 。 如果你是 v3.7.1 之外的版本，可能有些地方會有出入，請留 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類