主頁 > 企業開發 > 現代 CSS 高階技巧，不規則邊框解決方案

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

2022-12-19 07:05:29 企業開發

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

  • 現代 CSS 之高階圖片漸隱消失術
  • 現代 CSS 高階技巧，像 Canvas 一樣自由繪圖構建樣式！
  • 現代 CSS 高階技巧，完美的波浪進度條效果！

在上三篇中，我們詳細介紹了 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 奇技淫巧 | 巧妙實作文字二次加粗再加邊框

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

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

<div ></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 就不那么好實作了，像是這樣：

image

在過往，有兩種相對還不錯的方式，去實作這樣一個不規則圖形的邊框：

  1. 借助 filter，利用多重 drop-shadow()
  2. 借助 SVG 濾鏡實作

我們快速回顧一下這兩個方法，

借助 filter，利用多重 drop-shadow() 實作不規則邊框

還是上面的圖形，我們利用多重 drop-shadow()，可以大致的得到它的邊框效果，代碼如下:

div {
    position: relative;
    width: 180px;
    height: 64px;
    background: #fff;

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

可以看到，這里我們通過疊加 3 層 drop-shadow()，來實作不規則圖形的邊框，雖然 drop-shadow() 是用于生成陰影的，但是多層值很小的陰影疊加下，竟然有了類似于邊框的效果：

image

借助 SVG 濾鏡實作實作不規則邊框

另外一種方式，需要掌握比較深的 SVG 濾鏡知識，通過實作一種特殊的 SVG 濾鏡，再通過 CSS 的 filter 引入，實作不規則邊框，

看看代碼：

<div></div>

<svg  height="0">
    <filter id="outline">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology>
        <feMerge>
            <feMergeNode in="DILATED" />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
</svg>

div {
    position: relative;
    width: 180px;
    height: 64px;
    background: #fff;

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

簡單淺析一下這段 SVG 濾鏡代碼：

  1. <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology> 將原圖的不透明部分作為輸入，采用了 dilate 擴張模式且程度為 radius="1"，生成了一個比原圖大 1px 的黑色圖塊
  2. 使用 feMerge 將黑色圖塊和原圖疊加在一起
  3. 可以通過控制濾鏡中的 radius="1" 來控制邊框的大小

這樣，也可以實作不規則圖形的邊框效果：

image

CodePen Demo -- 3 ways to achieve unregular border

利用 CSS Painting API 實作不規則邊框

那么，到了今天，利用 CSS Painting API ，我們有了一種更為直接的方式，更好的解決這個問題，

還是上面的圖形，我們利用 clip-path 來實作一下，

<div></div>

div {
    position: relative;
    width: 200px;
    height: 64px;
    background: #f49714;
    clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 0% 0%;); 
}

我們可以得到這樣一個圖形：

image

當然，本文的主角是 CSS Painting API，既然我們有 clip-path 的引數，其實完全也可以利用 CSS Painting API 的 borderDraw 來繪制這個圖形，

我們嘗試一下，改造我們的代碼：

<div></div>
<script>
if (CSS.paintWorklet) {              
   CSS.paintWorklet.addModule('/CSSHoudini.js');
}
</script>

div {
    position: relative;
    width: 200px;
    height: 64px;
    background: paint(borderDraw);
    --clipPath: 85% 0%, 100% 50%, 85% 100%, 0% 100%, 0% 0%;); 
}

這里，我們將原本的 clip-path 的具體路徑引數，定義為了一個 CSS 變數 --clipPath，傳入我們要實作的 borderDraw 方法中，整個圖形效果，就是要利用 background: paint(borderDraw) 繪制出來，

接下來，看看，我們需要實作 borderDraw，核心的點在于，我們通過拿到 --clipPath 引數，決議它，然后通過回圈函式利用畫布把這個圖形繪制出來，

// CSSHoudini.js 檔案
registerPaint(
    "borderDraw",
    class {
        static get inputProperties() {
            return ["--clipPath"];
        }

        paint(ctx, size, properties) {
            const { width, height } = size;
            const clipPath = properties.get("--clipPath");
            const paths = clipPath.toString().split(",");
            const parseClipPath = function (obj) {
                const x = obj[0];
                const y = obj[1];
                let fx = 0,
                    fy = 0;
                if (x.indexOf("%") > -1) {
                    fx = (parseFloat(x) / 100) * width;
                } else if (x.indexOf("px") > -1) {
                    fx = parseFloat(x);
                }
                if (y.indexOf("%") > -1) {
                    fy = (parseFloat(y) / 100) * height;
                } else if (y.indexOf("px") > -1) {
                    fy = parseFloat(y);
                }
                return [fx, fy];
            };

            var p = parseClipPath(paths[0].trim().split(" "));
            ctx.beginPath();
            ctx.moveTo(p[0], p[1]);
            for (var i = 1; i < paths.length; i++) {
                p = parseClipPath(paths[i].trim().split(" "));
                ctx.lineTo(p[0], p[1]);
            }
            ctx.closePath();            
            ctx.fill();
        }
    }
);

簡單解釋一下上述的代碼，注意其中最難理解的 parseClipPath() 方法的解釋，

  1. 首先我們，通過 properties.get("--clipPath")，我們能夠拿到傳入的 --clipPath 引數
  2. 通過 spilt() 方法，將 --clipPath 分成一段段，也就是我們的圖形實際的繪制步驟
  3. 這里有一點非常重要，也就是 parseClipPath() 方法，由于我們的 -clipPath 的每一段可能是 100% 50% 這樣的構造，但是實際在繪圖的程序中，我們需要的實際坐標的絕對值，譬如在一個 100 x 100 的畫布上，我們需要將 50% 50% 的百分比坐標，轉化為實際的 50 50 這樣的絕對值
  4. 在理解了 parseClipPath() 后，剩下的就都非常好理解了，我們通過 ctx.beginPath()、ctx.move、ctx.lineTo 以及 ctx.closePath() 將整個 --clipPath 的圖形繪制出來
  5. 最后，利用 ctx.fill() 給圖形上色

這樣，我們就得到了這樣一個圖形：

image

都拿到了完整的圖形了，那么我們只給這個圖形繪制邊框，不上色，不就得到了它的邊框效果了嗎？

簡單改造一些 JavaScript 代碼的最后部分：

// CSSHoudini.js 檔案
registerPaint(
    "borderDraw",
    class {
        static get inputProperties() {
            return ["--clipPath"];
        }
        paint(ctx, size, properties) {
            // ...
            ctx.closePath();            
            // ctx.fill();
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#000";
            ctx.stroke();
        }
    }
);

這樣，我們就得到了圖形的邊框效果：

image

僅僅利用 background 繪制的缺陷

但是，僅僅利用 [bacg](background: paint(borderDraw)) 來繪制邊框效果，會有一些問題，

上述的圖形，我們僅僅賦予了 1px 的邊框，如果我們把邊框改成 5px 呢？看看會發生什么？

// CSSHoudini.js 檔案
registerPaint(
    "borderDraw",
    class {
        static get inputProperties() {
            return ["--clipPath"];
        }
        paint(ctx, size, properties) {
            // ...
            ctx.lineWidth = 5;
            ctx.strokeStyle = "#000";
            ctx.stroke();
        }
    }
);

此時，整個圖形會變成：

image

可以看到，沒有展示完整的 5px 的邊框，這是由于整個畫布只有元素的高寬大小，而上述的代碼中，元素的邊框有一部分繪制到了畫布之外，因此，整個圖形并非我們期待的效果，

因此，我們需要換一種思路解決這個問題，繼續改造一下我們的代碼，僅僅需要改造 CSS 代碼即可：

div {
    position: relative;
    width: 200px;
    height: 64px;
    margin: auto;
    clip-path: polygon(var(--clipPath)); 
    --clipPath: 85% 0%, 100% 50%, 85% 100%, 0% 100%, 0% 0%;
    
    &::before {
      content:"";
      position:absolute;
      inset: 0;
      mask: paint(borderDraw);
      background: #000;
    }
}

這里，我們的元素本身，還是利用了 clip-path: polygon(var(--clipPath)) 剪切了自身，同時，我們借助了一個偽元素，利用這個偽元素去實作具體的邊框效果，

這里其實用了一種內外切割的思想，去實作的邊框效果：

  1. 利用父元素的 clip-path: polygon(var(--clipPath)) 剪切掉外圍的圖形
  2. 利用給偽元素的 mask 作用實際的 paint(borderDraw) 方法，把圖形的內部鏤空，只保留邊框部分

還是設定 ctx.lineWidth = 5，再看看效果：

image

看上去不錯，但是實際上，雖然設定了 5px 的邊框寬度，但是實際上，上圖的邊框寬度只有 2.5px 的，這是由于另外一點一半邊框實際上被切割掉了，

因此，我們如果需要實作 5px 的效果，實際上需要 ctx.lineWidth =10，

當然，我們可以通過一個 CSS 變數來控制邊框的大小：

div {
    position: relative;
    width: 200px;
    height: 64px;
    margin: auto;
    clip-path: polygon(var(--clipPath)); 
    --clipPath: 85% 0%, 100% 50%, 85% 100%, 0% 100%, 0% 0%;
    --borderWidth: 5;
    
    &::before {
      content:"";
      position:absolute;
      inset: 0;
      mask: paint(borderDraw);
      background: #000;
    }
}

在實際的 borderDraw 函式中，我們將傳入的 --borderWidth 引數，乘以 2 使用就好：


registerPaint(
    "borderDraw",
    class {
        static get inputProperties() {
            return ["--clipPath", "--borderWidth"];
        }
        paint(ctx, size, properties) {
            const borderWidth = properties.get("--borderWidth");
            // ...
            ctx.lineWidth = borderWidth * 2;
            ctx.strokeStyle = "#000";
            ctx.stroke();
        }
    }
);

這樣，我們每次都能得到我們想要的邊框長度：

image

CodePen Demo -- CSS Hudini & Unregular Custom Border

到這里，整個實作就完成了，整個程序其實有多處非常關鍵的點，會有一點點難以理解，具體可能需要自己實際除錯一遍找到實作的原理，

具體應用

在掌握了上述的方法后，我們就可以利用這個方式，實作各類不規則圖形的邊框效果，我們只需要傳入對于的 clip-path 引數以及我們想要的邊框長度即可，

好，這樣，我們就能實作各類不同的不規則圖形的邊框效果了，

像是這樣：

div {
    position: relative;
    width: 200px;
    height: 200px;
    clip-path: polygon(var(--clipPath)); 
    --clipPath: 0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%;
    --borderWidrh: 1;
    --color: #000;
    
    &::before {
      content:"";
      position:absolute;
      inset: 0;
      mask: paint(borderDraw);
      background: var(--color);
    }
}

div:nth-child(2) {
    --clipPath: 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%;
    --borderWidrh: 2;
    --color: #ffcc00;
}
div:nth-child(3) {
    --clipPath: 90% 58%90% 58%, 69% 51%, 69% 51%, 50% 21%, 50% 21%, 39% 39%, 39% 39%, 15% 26%, 15% 26%, 15% 55%, 15% 55%, 31% 87%, 31% 87%, 14% 84%, 14% 84%, 44% 96%, 44% 96%, 59% 96%, 59% 96%, 75% 90%, 75% 90%, 71% 83%, 71% 83%, 69% 73%, 69% 73%, 88% 73%, 88% 73%, 89% 87%, 89% 87%, 94% 73%, 94% 73%;
    --borderWidrh: 1;
    --color: deeppink;
}
div:nth-child(4) {
    --clipPath: 0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%;
    --borderWidrh: 1;
    --color: yellowgreen;
}
div:nth-child(5) {
    --clipPath: 20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%;
    --borderWidrh: 3;
    --color: #c7b311;
}

得到不同圖形的邊框效果：

image

CodePen Demo -- CSS Hudini & Unregular Custom Border

又或者是基于它們，去實作各類按鈕效果，這種效果在以往使用 CSS 是非常非常難實作的：

image

它們的核心原理都是一樣的，甚至加上 Hover 效果，也是非常的輕松：

完整的代碼，你可以戳這里：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）：

image

Chrome 和 Edge 基于 Chromium 內核的瀏覽器很早就已經支持，而主流瀏覽器中，Firefox 和 Safari 目前還不支持，

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

最后

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

如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540254.html

標籤：Html/Css

上一篇：vue3專案，記錄我是如何用1h實作產品預估1天作業量的界面需求

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

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了！

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more

Copyright © 2010-2020 有解無憂