現代 CSS 高階技巧，不規則邊框解決方案

本文是 CSS Houdini 之 CSS Painting API 系列第四篇。

在上三篇中，我們詳細介紹了 CSS Painting API 是如何一步一步，實現自定義圖案甚至實現動畫效果的！

在這一篇中，我們將繼續探索，嘗試使用 CSS Painting API，去實現過往 CSS 中非常難以實現的一個點，那就是如何繪製不規則圖形的邊框。

CSS Painting API

再簡單快速的過一下，什麼是 CSS Painting API。

CSS Painting API 是 CSS Houdini 的一部分。而 Houdini 是一組底層 API，它們公開了 CSS 引擎的各個部分，從而使開發人員能夠通過加入瀏覽器渲染引擎的樣式和佈局過程來擴充套件 CSS。Houdini 是一組 API，它們使開發人員可以直接存取 CSS 物件模型（CSSOM），使開發人員可以編寫瀏覽器可以解析為 CSS 的程式碼，從而建立新的 CSS 功能，而無需等待它們在瀏覽器中本地實現。

CSS Paint API 目前的版本是 CSS Painting API Level 1。它也被稱為 CSS Custom Paint 或者 Houdini's Paint Worklet。

我們可以把它理解為 JS In CSS，利用 JavaScript Canvas 畫布的強大能力，實現過往 CSS 無法實現的功能。

過往 CSS 實現不規則圖形的邊框方式

CSS 實現不規則圖形的邊框，一直是 CSS 的一個難點之一。在過往，雖然我們有很多方式利用 Hack 出不規則圖形的邊框，我在之前的多篇文章中有反覆提及過：

我們來看看這樣一個圖形：

利用 CSS 實現這樣一個圖形是相對簡單的，可以利用 mask 或者 background 中的漸變實現，像是這樣：

<div class="arrow-button"></div>

.arrow-button {
    position: relative;
    width: 180px;
    height: 64px;
    background: #f49714;

    &::after {
        content: "";
        position: absolute;
        width: 32px;
        height: 64px;
        top: 0;
        right: -32px;
        background: 
            linear-gradient(-45deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%),
            linear-gradient(-135deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%);
        background-size: 32px 32px;
        background-repeat: no-repeat;
        background-position: 0 bottom, 0 top;
    }
}

但是，如果，要實現這個圖形，但是隻有一層邊框，利用 CSS 就不那麼好實現了，像是這樣：

完整的程式碼，你可以戳這裡：CodePen Demo -- https://codepen.io/Chokcoco/pen/ExRLqdO

至此，我們再一次利用 CSS Painting API 實現了我們過往 CSS 完全無法實現的效果。這個也就是 CSS Houdini 的魅力，是 JS In CSS 的魅力。

相容性？

好吧，其實上一篇文章也談到了相容問題，因為可能有很多看到本篇文章並沒有去翻看前兩篇文章的同學。那麼，CSS Painting API 的相容性到底如何呢？

CanIUse - registerPaint 資料如下（截止至 2022-11-23）：

Chrome 和 Edge 基於 Chromium 核心的瀏覽器很早就已經支援，而主流瀏覽器中，Firefox 和 Safari 目前還不支援。

CSS Houdini 雖然強大，目前看來要想大規模上生產環境，仍需一段時間的等待。讓我們給時間一點時間！

最後

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