個人收藏的必備網頁設計控件，也許正是你在尋找的（九）

、圖像燈箱 nanoGallery

nanoGallery 對jQuery來說是很容易實現的圖片畫冊插件。它具有很多特性：支持觸碰，響應式，快速和支持云儲存。相冊多級導航，燈箱效果，多縮略圖的hover效果，滑動展示，全屏，分頁，圖片延遲加載，主題，兼容bootstrap，可定制，可從Flickr/Picasa/Google+拉取照片等等。

主頁：https://github.com/Kris-B/nanoGALLERY

2、頁面導航 stickUp

stickUp 是一個jQuery 插件。你可以在任意使用jQuery的網頁上執行。你可以簡單地在任意頁面創建任意你想用戶在任何時候都可以看見的導航，它會自動顯示到瀏覽器窗口的頂部。

主頁：https://github.com/LiranCohen/stickUp

3、格式化 Autotab

AutoTab是一個輕量級的jQuery插件，提供了在一個表單文本字段的自動跳格和過濾，一旦達到設定的最大字符數，焦點將自動設置為下一個定義的元素。同樣，按退格鍵清除輸入的內容，焦點將自動返回之前的目標。

主頁：http://www.mathachew.com/sandbox/jquery-autotab/

4、圖表插件 jqPlot

jqPlot是jQuery的JavaScript框架一個繪圖和圖表插件。jqPlot 提供各種漂亮的折線，條形和餅圖圖表。jqPlot 不僅可以元素定制，甚至使用豐富的插件定義各種功能！并且它支持主流的絕大多數瀏覽器。

它有如下特點：

許多圖表樣式選項。
日期軸與自定義的格式化。
自動趨勢線計算。
工具提示和數據點突出。
合理的缺省值，易于使用。

主頁：http://www.jqplot.com/

5、視頻背景 Bigvideo.js

BigVideo.js 是一個 jQuery 視頻插件，能讓用戶很方便將視頻作為網站的背景并且能夠生成自適應的視頻背景。它可以播放一個無聲視頻（或一系列視頻），或者像播放器一樣提供一個視頻列表給用戶，讓他們選擇喜歡的進行播放。這個插件基于 Video.js 構建。此外如果有些設備不支持自動播放則轉換成用圖片來顯示。

主頁：http://dfcb.github.io/BigVideo.js/

6、翻頁效果 Turn.js

Turn.js 是一個輕量級的 (15kb) jQuery/html5 插件，用來創建類似書本和雜志翻頁效果，支持觸摸屏設備。Turn.js 支持硬件加速來讓翻頁效果更加平滑。它可通過 API 來獲取當前顯示的頁號，并提供選項來定制默認頁號、加速器、陰影和延時。

主頁：https://github.com/blasten/turn.js

7、樹編輯器 Treed

Treed 是一個簡單易用的，可擴展，可訂制，功能強達的樹編輯器。

主頁：http://jquery-plugins.net/treed-powerful-tree-editor

8、省市聯動 Distpicker

Distpicker 是一個中國地區簡易的省市地區聯動jQuery插件。

主頁：https://fengyuanchen.github.io/distpicker/

9、畫廊 Unite Gallery

Unite Gallery是一個jQuery的圖像和視頻庫的插件。它非常強大，速度快，擁有所有必須具備的功能，如響應速度，觸摸功能，甚至縮放功能等。

主頁：http://unitegallery.net/

10、貨幣格式 CurrencyFormatter.js

CurrencyFormatter.js允許用戶以多種貨幣格式格式化數字。它包含155種貨幣的定義，并能處理異常格式的貨幣，如印度盧比，是完全可配置的。

主頁：https://osrec.github.io/currencyFormatter.js/

這次就到這里了，下次繼續，希望喜歡的朋友多多收藏、訂閱和留言支持，謝謝。頭條號：折翅的小鳥

者:極客小俊

一個專注于web技術的80后

你不用拼過聰明人，你只需要拼過那些懶人你就一定會超越大部分人!

進入正題!

1. 卸載vs code、及安裝的插件和個人配置信息

第一步: 卸載軟件

 注意:此步驟雖然刪掉了應用軟件，但是此時重新安裝會發現之前下載的插件和個人配置信息都還會重新加載出來，所以繼續進行以下步驟：

第二步: 找到下圖中文件夾的目錄，然后將之刪除，即可徹底清除已安裝的插件個個人配置信息

第三步:

 路徑是: C:\Users\Administrator\AppData\Roaming\Code
 注意:AppData默認是隱藏文件夾

2. 重置vs code所有設置（還原vs code出廠默認設置）

解決問題場景: 配置失誤，導致vscode無法使用，如窗口縮放太大，快捷鍵失效。

 打開如目錄 例如: C:\Users\Administrator\AppData\Roaming\Code\User

用記事本打開目錄下的settings.json，修改里面的對應配置可以解決對應的問題，重置的話全部刪除就好了!

3. vs code發光字主題與插件 SynthWave '84 - VS Code theme

在vs code插件市場里面搜索SynthWave '84基礎主題包進行安裝 Custom CSS and JS Loader自定義css、JS插件

在 vs code插件市場里面搜索 Custom CSS and JS Loader自定義css、JS插件進行安裝,

在本地新建一個css文件命名為synthwave84.css，并且寫入如下內容。注意這個CSS文件最好放在用戶文件夾下，或者其他你喜歡的地方，并記住文件所在的路徑

 .mtk3 {
     color: #f92aad;
     text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
 }
 
 .mtk4 {
     color: #6d77b3;
 }
 
 .mtk5 {
     color: #f97e72;
 }
 
 .mtk6 {
     color: #fdfdfd;
     text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;
 }
 ?
 .mtk7 {
     color: #fff5f6;
     text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;
 }
 ?
 .mtk8 {
     color: #72f1b8;
     text-shadow: 0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475;
 }
 ?
 .mtk9 {
     color: #f4eee4;
     text-shadow: 0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;
 }
 ?
 .monaco-editor .margin, .monaco-editor-background, .monaco-editor .inputarea.ime-input {
     background: transparent;
 }
 ?
 /* Add the subtle gradient to the editor background */
 .monaco-editor {
     background-color: transparent !important;
     background-image: linear-gradient(to bottom, #2a2139 75%, #34294f);
     background-size: auto 100vh;
     background-position: top;
     background-repeat: no-repeat;
 }
 ?
 /* Sweet sunset dots */
 .monaco-workbench .activitybar > .content .monaco-action-bar .badge .badge-content {
     background: linear-gradient(to bottom, #fff951 25%, #fc28a8);
 }
 ?
 /* Active tab neon */
 .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit.active {
     box-shadow: inset 0 -5px 25px #fc28a825;
     position: relative;
 }
 ?
 /* Active tab stripe */
 .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit.active::after {
     content: '';
     position: absolute;
     bottom: -1px;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(to right, #fc28a8, #03edf9) !important;
     opacity: 1;
     z-index: 6;
 }
 ?
 .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit::after {
     content: '';
     position: absolute;
     bottom: -1px;
     left: 0;
     right: 0;
     height: 0px;
     transition: opacity 1s;
     opacity: 0;
     z-index: 6;
 }
 ?
 /* Active sidebar item */
 .monaco-workbench .activitybar > .content .monaco-action-bar .action-item.checked {
     box-shadow: inset 0 -5px 25px #fc28a825;
     position: relative;
 }
 ?
 .monaco-workbench .activitybar > .content .monaco-action-bar .action-item.checked::after {
     content: '';
     position: absolute;
     bottom: 0px;
     top: 0px;
     left: 0px;
     width: 4px;
     background: linear-gradient(to bottom, #fc28a8, #03edf9) !important;
     opacity: 1;
 }
 ?
 .monaco-workbench .activitybar > .content .monaco-action-bar .action-item::after {
     content: '';
     position: absolute;
     bottom: 0px;
     top: 0px;
     left: 0px;
     width: 0px;
     transition: opacity 1s;
     opacity: 0;
 }
 ?
 /* update lightbuld to be neon */
 .lightbulb-glyph {
     background: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect fill='%23ffffff' x='5.68' y='6.93' width='2.1' height='6.1' rx='0.96' transform='translate(-1.94 1.63) rotate(-12.09)'/%3E%3Cpath fill='%2303edf9' d='M7.08,13.5a1.46,1.46,0,0,1-1.43-1.16L4.77,8.26A1.47,1.47,0,0,1,5.9,6.53l.17,0A1.46,1.46,0,0,1,7.81,7.61l.87,4.09a1.46,1.46,0,0,1-1.12,1.73l-.18,0Zm-.7-6h-.1l-.17,0a.45.45,0,0,0-.29.21.45.45,0,0,0-.07.34l.88,4.09a.46.46,0,0,0,.54.35l.18,0a.46.46,0,0,0,.29-.2.48.48,0,0,0,.07-.35L6.83,7.82A.46.46,0,0,0,6.38,7.46Z'/%3E%3Crect fill='%23ffffff' x='8.22' y='6.93' width='2.1' height='6.1' rx='0.96' transform='translate(16.25 21.68) rotate(-167.91)'/%3E%3Cpath fill='%2303edf9' d='M8.93,13.5a1.63,1.63,0,0,1-.31,0l-.18,0A1.46,1.46,0,0,1,7.32,11.7l.87-4.09A1.47,1.47,0,0,1,9.93,6.49l.18,0a1.45,1.45,0,0,1,.92.63,1.47,1.47,0,0,1,.2,1.1l-.88,4.08a1.45,1.45,0,0,1-.63.93A1.48,1.48,0,0,1,8.93,13.5Zm.69-6a.45.45,0,0,0-.25.07.5.5,0,0,0-.2.29L8.3,11.9a.43.43,0,0,0,.06.35.46.46,0,0,0,.29.2l.18,0a.47.47,0,0,0,.55-.35l.87-4.09a.45.45,0,0,0-.06-.34A.47.47,0,0,0,9.9,7.5l-.18,0Z'/%3E%3Cpath fill='%23ffffff' d='M11.77,9l-3.53.67a1,1,0,0,1-1.15-.88h0A1.09,1.09,0,0,1,7.9,7.48l3.53-.67a1,1,0,0,1,1.15.89h0A1.08,1.08,0,0,1,11.77,9Z'/%3E%3Cpath fill='%2303edf9' d='M8.07,10.18A1.54,1.54,0,0,1,6.6,8.83a1.74,1.74,0,0,1,.25-1.22,1.46,1.46,0,0,1,1-.66l3.52-.67A1.51,1.51,0,0,1,13.07,7.6a1.61,1.61,0,0,1-1.22,1.88l-3.52.67A1.15,1.15,0,0,1,8.07,10.18ZM11.6,7.34h-.09L8,8a.53.53,0,0,0-.4.62.5.5,0,0,0,.57.44l3.52-.67a.54.54,0,0,0,.41-.62A.53.53,0,0,0,11.6,7.34Z'/%3E%3Cpath fill='%23ffffff' d='M11.74,6.74,4.67,8.08A1,1,0,0,1,3.52,7.2h0A1.08,1.08,0,0,1,4.33,6l7.06-1.34a1,1,0,0,1,1.16.88h0A1.08,1.08,0,0,1,11.74,6.74Z'/%3E%3Cpath fill='%2303edf9' d='M4.5,8.64a1.44,1.44,0,0,1-.86-.29A1.64,1.64,0,0,1,3,7.29a1.72,1.72,0,0,1,.25-1.21,1.48,1.48,0,0,1,1-.67l7.07-1.34a1.39,1.39,0,0,1,1.11.27A1.65,1.65,0,0,1,13,5.4a1.72,1.72,0,0,1-.25,1.21,1.48,1.48,0,0,1-1,.67L4.76,8.62Zm7.07-3.5h-.09L4.42,6.49a.45.45,0,0,0-.32.22.56.56,0,0,0-.09.4.61.61,0,0,0,.21.35.47.47,0,0,0,.36.09L11.65,6.2A.47.47,0,0,0,12,6a.51.51,0,0,0,.08-.4.55.55,0,0,0-.2-.35A.47.47,0,0,0,11.57,5.14Z'/%3E%3Cpath fill='%23ffffff' d='M11.7,4.52,4.64,5.86A1,1,0,0,1,3.49,5h0A1.09,1.09,0,0,1,4.3,3.72l7.06-1.34a1,1,0,0,1,1.15.88h0A1.09,1.09,0,0,1,11.7,4.52Z'/%3E%3Cpath fill='%2303edf9' d='M4.46,6.42a1.36,1.36,0,0,1-.85-.3,1.58,1.58,0,0,1-.61-1A1.61,1.61,0,0,1,4.21,3.19l7.07-1.34a1.35,1.35,0,0,1,1.11.27,1.58,1.58,0,0,1,.61,1,1.74,1.74,0,0,1-.25,1.22,1.44,1.44,0,0,1-1,.66L4.72,6.39A1.09,1.09,0,0,1,4.46,6.42Zm7.07-3.51h-.08L4.38,4.26a.53.53,0,0,0-.4.62.5.5,0,0,0,.57.44L11.62,4a.47.47,0,0,0,.32-.22.62.62,0,0,0,.08-.4.56.56,0,0,0-.2-.35A.53.53,0,0,0,11.53,2.91Z'/%3E%3Cpath fill='%23ffffff' d='M8.34,2.89,4.57,3.6a1,1,0,0,1-1.15-.88h0a1.08,1.08,0,0,1,.81-1.25L8,.75a1,1,0,0,1,1.15.89h0A1.08,1.08,0,0,1,8.34,2.89Z'/%3E%3Cpath fill='%2303edf9' d='M4.4,4.16a1.44,1.44,0,0,1-.86-.29,1.69,1.69,0,0,1-.61-1.05A1.74,1.74,0,0,1,3.18,1.6a1.51,1.51,0,0,1,1-.67L7.91.22A1.38,1.38,0,0,1,9,.49a1.58,1.58,0,0,1,.61,1.05,1.74,1.74,0,0,1-.25,1.22,1.47,1.47,0,0,1-1,.66l-3.77.72A1.18,1.18,0,0,1,4.4,4.16ZM8.17,1.28H8.09L4.32,2A.45.45,0,0,0,4,2.23a.51.51,0,0,0-.08.4.55.55,0,0,0,.2.35.49.49,0,0,0,.37.09l3.77-.72a.47.47,0,0,0,.32-.22.62.62,0,0,0,.08-.4.56.56,0,0,0-.2-.35A.53.53,0,0,0,8.17,1.28Z'/%3E%3Cpolygon fill='%231e1e1e' points='5.5 11.1 5.5 11.1 5.5 14.4 7.1 16 9.1 16 10.6 14.4 10.6 11.1 5.5 11.1'/%3E%3Cpath fill='%23c5c5c5' d='M6.5,12h3v1h-3Zm1,3H8.6l.9-1h-3Z'/%3E%3C/svg%3E") 50% no-repeat !important;
     filter: drop-shadow(0 0 5px #03edf9);
 }

打開vscode的用戶配置文件setting.json、

在setting.json中配置synthwave84.css的文件路徑

 注意: 如果還有其他的配置,需要在最后一個值后需要補一個逗號! 這是JSON格式的配置寫法
 注意: 文件路徑不一定非要在C盤,其他盤也是可以的
 注意: 本地路徑前面必須加 file:/// , 絕對不能刪!!!!
 注意: 下面的大括號并不一定復制過去,取決于有沒有其他配置,如果setting.json文件是空的就全部復制過去!

 例如: 
 windows格式:
 { 
     "vscode_custom_css.imports": [ "file:///C:/Users/Administrator/synthwave84.css" ]
 }
 ?
 mac格式:
 ?
 { 
     "vscode_custom_css.imports": [ "file:///Users/用戶名/synthwave84.css" ]
 }
 ?
 注意: 路徑是用的正斜杠

在vscode主頁調出“顯示所有命令菜單 windows : ctrl + shift + p
蘋果mac : command + shift + P
在出來的菜單中輸入: Enable custom CSS and JS 并點擊，重啟vscode即可。
關閉發光效果輸入 : Disable custom CSS and JS

4. 取消修改synthwave主題的斜體注釋

打開synthwave-color-theme文件

 位置: C:\Users\Administrator\.vscode\extensions\robbowen.synthwave-vscode-0.1.5\themes

在synthwave-color-theme文件中, 搜索: italic 把fontStyle的值全部清空, 然后重啟vscode 斜體注釋就取消了!

5. 在vscode中,使用快捷鍵打開瀏覽器預覽html頁面

vscode怎么用瀏覽器打開htm頁面l預覽？這里大家可以通過安裝open in browser插件解決!

在安裝完open in browser插件后，在html代碼中鼠標右鍵可以看到多了兩個打開選擇，點擊選項即可打開瀏覽器進行預覽。

Open in Default Browsers：使用默認瀏覽器打開  快捷鍵：alt+b
Open in Other Browsers：  使用其他瀏覽器打開  快捷鍵：alt+shift+b

修改默認瀏覽器

那么怎么修改默認瀏覽器呢？

打開setting.json配置文件, 加入open-in-browser.default配置,例如: 把默認瀏覽器配置為火狐瀏覽器,如下圖:

6. vs code背景圖片設置的幾種方法

方法1 修改workbench.desktop.main.css文件設置背景圖片

vscode其實就是一個網頁程序,所以可以找到vscode中的一個文件進行修改它的背景圖片,這個文件就是:workbench.desktop.main.css

這個文件的路徑是在vs code安裝目錄,如下

例如: D:\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css

然后打開這個workbench.desktop.main.css 文件進行背景的添加設置, 注意這個文件打開后需要格式化代碼一下!

背景圖可以設置全局顯示背景圖也可以局部顯示背景圖

局部顯示背景圖，如下css代碼:

body {
    background-image: url('file:///圖片地址');
    background-size: 20%;
    background-position: 100% 100%;
    opacity: 0.75;
    background-repeat: no-repeat;
}

如下圖:

注意: 局部顯示的圖片格式最好選擇png格式的

設置完成后重啟vscode、效果如下圖:

全局顯示背景圖，如下css代碼:

body {
    background-image: url('file:///圖片地址');
    background-size: 100%;
    opacity: 0.75;
    background-repeat: no-repeat;
}

設置完成后重啟vscode、效果如下:

注意: 這種修改workbench.desktop.main.css 文件的方法來設置背景 如果VScode自動軟件更新后  背景會消失，需要重新設置!

方法2 使用background插件

在vscode插件市場搜索: background插件、然后進行安裝如下圖

安裝background背景插件后重啟 vscode 會看見走下角的背景圖片效果, 如下：

這里background背景插件還提供了一些用戶自定義的配置參數, 這些配置參數設定在setting.json文件中

如下表

nameTypeDescriptionbackground.enabledBoolean插件是否啟用 If background enabled 默認truebackground.useDefaultBoolean是否使用默認圖片 If use default images 默認truebackground.customImagesArray<String地址>自定義圖片 Your Your custom imagesbackground.styleObject自定義樣式 Custom stylebackground.stylesArray<Object>每個圖片的獨立樣式 Style of each imagebackground.useFrontBoolean前景圖/背景圖。在代碼上面還是下面一般設置truebackground.loopBoolean循環模式，會重復顯示圖片 loop mode, may repeat your images

在setting.json中配置案例:

 "background.customImages": [
        "file:///D:/6.png"   //圖片地址
    ],
    "background.style": {
        "content":"''",
        "pointer-events":"none",
        "position":"absolute",//圖片位置
        "width":"100%",
        "height":"100%",
        "z-index":"99999",
        "background.repeat":"no-repeat",
        "background-size":"25%,25%",//圖片大小
        "opacity":0.2 //透明度
    },
    "background.useFront": true,
    "background.useDefault": false,//是否使用默認圖片

如下圖:

方法3 使用background-cover 背景插件

介紹: 這個插件的原理其實也就是修改workbench.desktop.main.css這個CSS文件，但是比起第一種方法來說使用插件去修改比手工去修改更方便一些而已

為了測試方便,首先安裝這個插件之前 如果有設定前面兩種方法的背景配置 就先把setting.json中的相關配置注釋一下!

注意: 方法2 和 方法3 的背景設置時可以共存的!!

然后再安裝background-cover 插件

安裝后重啟! 如果你看到依舊沒有效果那說明還沒有進行設置, 可以使用 ctrl + shift + P 選擇 "backgroundCover - start",然后就可以對背景圖片進行選擇和設置了!

其實在setting.json配置文件當中也會產生一行配置: 例如 : "backgroundCover.imagePath": "d:\background\4.jpg",

效果如下:

Notice

1.點擊底部切換背景圖按鈕 / Click the bottom toggle background button
2.ctrl + shift + P > "backgroundCover - start"
3.ctrl + shift + F7 > "Random update background and restart"

注意: VSCode更新版本時會導致背景圖消失，需要手動重新設置, 所以這種方法跟第一種其實也差不多! 只不過選擇圖片方便了一點!

7. Browser Preview 內部瀏覽插件的使用

這個插件的作用就是快速的在vscode內部使用瀏覽器預覽html頁面效果, 在插件市場搜索Browser Preview

安裝完成后，在Bar上多出一個圖標，點擊圖標就可以在VSCode里打開瀏覽器了 ,

默認情況下打開的是vscode的官方網站, 如果要配置到我們自己的站點目錄方法如下:

打開設置，然后找到Extensions,再找到Browser Preview,找到Start Url寫上你默認打開的地址就可以了。

效果如下:

8. windos opacity 透明插件的使用

安裝好后，需要重啟一下VSCode，就可以出現透明效果了。

插件的設置: 打開設置界面，在左邊找到Extensions選項卡，然后找到Windows opacity進行設置

這里邊只有一個設置項，就是Opacity，也就是我們要設置的透明度，值從0-255,數值越小透明度越高，數值越大透明度越低。

如果想關閉透明 設置透明度255即可!!

9. Bracket Pair Colorizer 代碼區塊提示插件

為我們自動查找匹配標簽開始結尾，括號匹配。從此再也不用花時間再成對標簽或者括號開始與結尾的查找上了, 提高了工作效率

雖然vscode也自帶了標簽，括號的代碼區塊提示，但是個人覺得不夠明顯!! 所以推薦這款插件

進入插件，在搜索欄上搜索, Bracket Pair Colorizer 然后找到如果插件，直接點擊Install按鈕進行安裝

安裝后 vscode重啟效果如下:

有興趣的同學 可以找到File-->Preferences-->settings-->Extensions-->BracketPair 進行更多設置  這里就不多講了!

10.vscode高清代碼截圖插件

Polacode代碼截圖插件

這個插件就是可以快速生成漂亮的代碼截圖，比如要在博客里放置一個漂亮的代碼截圖，或者是快速分享到其它網絡平臺都可以使用這個截圖插件進行代碼截圖非常漂亮!!

打開VSCode中的插件，搜索 Polacode，這個你可以找到多個版本，這里我推薦的是 2020版本點擊install進行安裝

使用方法

安裝完成后,先打開你要分享的代碼,然后按Ctrl + Shift + p 打開命令面板,然后再輸入框中輸入Polacode,就可以打開使用了

把自己想截圖的代碼拖拽選中后就可以點擊右邊的截圖按鈕，生成圖片了!

CodeSnap 蘋果代碼截圖插件

也是一個vscode代碼截圖捕捉插件, 截圖更加清晰, 清晰度類似于蘋果電腦!

直接在插件市場搜索CodeSnap

安裝后重啟vscode

使用方法:

安裝完成后,先打開你要分享的代碼,然后按Ctrl + Shift + p 打開命令面板,然后再輸入框中輸入CodeSnap,就可以截圖代碼了!

CodeSnap想更改相關配置如下可以在settings.json中添加相關配置

CodeSnap是高度可配置的, 以下是可以更改的設置列表，以調整屏幕截圖的外觀

配置名稱值說明codesnap.backgroundColor十六進制顏色值代碼段容器邊緣的背景色。可以是任何有效的CSS顏色。codesnap.boxShadow默認值: rgba(0, 0, 0, 0.55) 0px 20px 68px代碼段的CSS框陰影。可以是任何有效的CSS框陰影codesnap.containerPadding整數 , 默認值: 3em, 也可以使用px代碼段容器邊緣的填充。可以是任何有效的CSS填充codesnap.roundedCorners布爾值默認為:true圓角配置用于配置邊緣內部代碼塊邊緣是否是圓角或方形角codesnap.showWindowControls布爾值默認為:true顯示或隱藏OS X樣式窗口按鈕的布爾值。codesnap.showWindowTitle布爾值默認為:false顯示或隱藏窗口標題欄上的文件夾或文件名。codesnap.showLineNumbers布爾值默認為:true顯示或隱藏行號的布爾值codesnap.realLineNumbers布爾值默認為:false從文件的實際行號開始的布爾值，而不是1。codesnap.transparentBackground布爾值默認為:false用于在拍攝屏幕快照時使用透明背景。codesnap.target值: window [不顯示邊緣容器] container [顯示邊緣容器]意思就是是否要顯示外部的邊緣容器

我的配置如下:

{
  //codesnap代碼截圖配置
  "codesnap.backgroundColor":"#f2f2f2",  //截圖代碼容器邊緣顏色
  "codesnap.boxShadow": "5px 5px 60px 0px #888888", //陰影設置
  "codesnap.containerPadding":"3em",
  "codesnap.roundedCorners":true,
  "codesnap.showWindowControls":true,
  "codesnap.showWindowTitle":false,
  "codesnap.showLineNumbers":true,
  "codesnap.realLineNumbers":false,
  "codesnap.transparentBackground":false,
  "codesnap.target":"container"
}

11.better Comments 修改注釋顏色插件

在代碼中注釋的顏色默認是灰色的，可能你會覺得不好看那么就可以使用這款插件來讓注釋更加漂亮

Better Comments插件就可以實現注釋代碼高亮

點擊VSCode中的插件，然后在搜索欄中輸入Better Comments，然后點擊install就可以安裝

使用方法

其實使用就是在注釋開頭加上特殊的符號。
!  : 紅色注釋
?  : 藍色注釋
// : 灰色刪除線注釋
todo : 橘紅色注釋
* : 淺綠色注釋

在html,php代碼中修改注釋的顏色如下圖:

PHP注釋

HTML注釋

配置顏色注釋

Notice: 你也可以自己定義屬于自己的顏色。方法如下：
點擊后打開了settings.json, 復制下面代碼到settings.json,根據自己的喜好自定義了
也可以增加新的注釋顏色標識符到setting.json中, 
注意: 原有的配置不能刪除 如果刪除就沒有效果了 ，只能新增注釋顏色標識!!
如下:

"better-comments.tags": [
    {
      "tag": "@",			//自己定義一個字符串名字
      "color": "yellow",    //顏色
      "strikethrough": false,
      "backgroundColor": "transparent"
    },  
    {
      "tag": "!",
      "color": "#FF2D00",    //顏色
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "?",
      "color": "#3498DB",    //顏色
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "//",
      "color": "#474747",  //顏色
      "strikethrough": true,
      "backgroundColor": "transparent"
    },
    {
      "tag": "todo",		 //顏色
      "color": "#FF8C00",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "*",			//顏色
      "color": "#98C379",
      "strikethrough": false,
      "backgroundColor": "transparent"
    }
  ],

修改完成之后一定要重啟vscode!

12.koroFileHeader 文件頭部注釋和函數頭部注釋插件

作用是生成文件頭部注釋和函數注釋 , 但這個插件可以支持所有主流語言生成注釋!

安裝完成后可以新建一個test.js文件,就可以看到文件頭部會自動生成一堆注釋

如果你是windows電腦，使用ctrl+shift+p鍵
Mac電腦使用shift+command+p鍵
然后輸入: codeDesign，就可以選擇注釋圖案了

==koroFileHeader Notice

如果沒有注釋 ，或者 想快速生成文件頭部注釋:
在文件頭部點擊快捷鍵`ctrl+alt+i`（Windows）
函數注釋快捷鍵 `ctrl+alt+t`

如果你是Mac電腦點擊`ctrl+cmd+i` (Mac)
就會快速生成代碼注釋了!

這時候你會發現不管是文件頭生成的注釋，還是函數頭部生成的注釋都是需要在settings.json中配置的!

文件頭注釋自定義配置在settings.json中配置文件頭的注釋如下

 "fileheader.customMade": {
    "Author": "3#",
    "objectDescription" : "目前是測試項目",
    "Date": "Do not edit", // 文件創建時間(不變)
    "LastEditors": "3#", // 文件最后編輯者
    "LastEditTime": "Do not edit", // 文件最后編輯時間
    "FilePath": "Do not edit" ,// 增加此項配置即可
    "Version": "2.0",
 },

修改完成后，要保存，然后退出VSCode，再進來，進入文件, 輸入ctrl+alt+i 就可以生成自定義文件頭部注釋了!

函數頭注釋自定義配置在settings.json中配置文件頭的注釋如下

"fileheader.cursorMode": {  //此為函數注釋
        "author":"3#",
        "description":"",
        "param": "",
        "return": ""
 }

效果如下:

Notice

1. 描述內容(descripition)為了便捷添加，直接設置為空；
2. 這里的日期(Date)和修改時間(LastEditTime)設置，本身軟件就會自行添加和更新，所以直接寫“Do not edit”即可。
3. 除日期和參數(param)外的其他內容，均可嘗試設置為漢字，方便查看

13.vscode 字體推薦

Consolas在windows下是一款很好看的字體

同時兩款值得推薦的字體是 Source Code Pro和Fira Code, 可以在settings.json中進行配置!

也可以直接修改settings.json配置文件添加如下配置:

  "editor.fontFamily": "Fira Code",   //字體
  "editor.fontSize": 12,			 //字體大小
  "editor.fontWeight":"normal",		//字體粗細
  "editor.fontLigatures":true,		//是否字體連字

14.vscode編輯markdown相關插件

Markdown Preview Enhanced 預覽插件

安裝完成后重啟vscode即可

markdown PDF 插件

markdown PDF這個插件可用于將markdown文檔轉化為 PDF、HTML、PNG等文件的插件

打開vscode插件市場搜索markdown PDF 進行安裝

安裝markdown PDF插件會依賴Chromium, 因此默認情況下它會嘗試下載Chromium, 并且時間會等待很長一段時間

但是某些時候在國內，認情況下它是無法下載的，所以您得手動下載它。

其實不必非要下載 Chromium，如果您的電腦中已經安裝了 Chrome 瀏覽器,那只需要簡單配置一下路徑即可。

1. 找到 Chrome 應用的路徑，比如，在我的電腦上是 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"。
2. 打開 VS Code settings.json設置 、建議在用戶設置下面添加 。

注意: 這一項，注意路徑中是兩個反斜杠。
{
    "markdown-pdf.executablePath": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
}

配置完畢后，用 VS Code 隨意打開一個 Markdown 文件，右擊文本編輯區域，就可以看到 Markdown PDF 的上下文菜單了

15.Prettier - Code formatter 插件

這款插件的作用就是可以在保存的時候自動代碼格式化,

直接在插件市場搜索它，并安裝后重啟vscode

這款插件需要進行一些配置,修改settings.json配置文件，添加如下配置信息

配置名稱值說明editor.formatOnSavetrue | false保存時格式化editor.tabSizeint 默認:2tab 大小為2個空格editor.wordWrapColumnint 自定義100 列后換行breadcrumbs.enabledtrue | false開啟 vscode 文件路徑導航prettier.semitrue | false設置語句末尾不加分號（有效果）prettier.singleQuotetrue | false設置強制單引號（有效果）vetur.format.defaultFormatter.htmlprettyhtml選擇 vue 文件中 template 的格式化工具editor.renderControlCharacterstrue | false顯示 markdown 中英文切換時產生的特殊字符vetur.format.defaultFormatterOptions"prettier": { "singleQuote": true, "semi":false }vetur 的自定義設置

16.Community Material Theme插件

打開vscode插件市場搜索Community Material Theme 進行安裝

然后點擊圖標下面的 set Color Theme按鈕切換主題，如圖：

17.indent-rainbow 縮進插件

使縮進更具可讀性的簡單擴展

打開vscode插件市場搜索indent-rainbow 直接安裝即可!

插件效果如下：

18.LeetCode 刷題插件

它的作用就是刷算法題可以在vscode內部進行測試!

打開vscode插件市場搜索LeetCode 進行安裝

安裝完成之后需要登錄!

登錄的時候有國際版 和  中國版 的選擇 我們 這里選擇的是中國版!  如下圖

然后輸出用戶名與密碼就可以登錄了! 登錄成功后如下圖所示!

就可以刷題了!

19.Material Icon Theme 文件圖標插件

這款插件的作用就是會讓vscode的文件產生好看的文件圖標

在插件市場中搜索Material Icon Theme 進行安裝后重啟vscode即可

效果如下:

20.VSCode Rainbow Fart彩虹屁語音插件

這個插件其實我認為沒什么多大的用處，但是安裝上玩玩倒是可以的!!

在插件市場搜索:Rainbow Fart

安裝完成之后，在 VSCode 的菜單欄中找到查看 - 命令面板，或使用快捷鍵 Ctrl + Shift + P（MacOS 使用 Command + Shift + P）呼出命令面板。

在命令面板中輸入 Enable Rainbow Fart 并回車。

此時應該會彈出一個消息通知，點擊通知上的 Open 按鈕。

在打開的頁面上點擊授權即可。

現在就可以在vscode中輸入代碼的時候會有語音聲音了!!

持續更新..........

@極客小俊，首發原創文章

如果喜歡話請 "點贊評論收藏" 一鍵三連

大家的支持就是我堅持下去的動力!

不要忘了??哦！

B站: https://space.bilibili.com/395999414

靠CSS 就寫出創意十足的設計是很困難的。到目前為止，就創建視覺特效而言，CSS 這門語言還是存在諸多限制。想用CSS 寫出Photoshop 般的效果，還差得很遠，個別情況下仍需要各種奇奇怪怪的招術助陣。

以前，要繞過種種限制，不得不犧牲簡潔性（加入大量元素，只為了展示效果的細節），或者犧牲性能（為了展現視覺效果，頁面中放了太多圖片及JavaScript）。

今天，我們就來介紹幾種能夠通過CSS 實現的特效。其中用到的一些CSS 特性還很新，瀏覽器支持不充分，但也有非常成熟的。很多特性在SVG 中已經存在很多年了，最近才加入到CSS 中。

這些技術能夠提升你的設計，就像做菜添加了調味料，平淡無奇的一盤菜也能頓時濃香四溢。使用它們的時候也得小心謹慎，必須考慮漸進式增強。另外也要知道，其中一些技術會有相關的bug。即使在支持它們的瀏覽器中，它們也通常還并不成熟。

圖1 展示了一個頁面（一些天體的介紹），其中包含很多視覺特效。就在幾年前，要通過CSS 實現這些效果幾乎是不可能的。整個頁面布局，就算能做出來，也要借助大量圖片和額外的HTML 元素。

今天，這些效果已經能夠在很多瀏覽器中通過CSS 來呈現了，即使做不到也能平穩地退化為可用版本。在一個頁面上集成大量視覺特效仍須謹慎，因為可能造成性能開銷，代價有大有小。

盡管如此，通過CSS 來完成它們仍然有很多好處，因為可以減少不必要的標記，而且維護起來比較容易。此外，隨著瀏覽器支持相應的規范，性能也會越來越好。

圖1 使用了很多視覺特效的頁面

接下來，我們就以這個“觀星指南”頁面作為例子，逐個講解其中涉及的技術點。

CSS Shapes

大家可能都知道，網頁布局基本上都是由矩形構成的，CSS Shapes 是一個新標準，旨在讓Web 設計者能使用各種形狀。形狀元素不僅會影響界面的外觀，還會影響頁面的內容流。

細說形狀

CSS Shapes 包含兩組新屬性，一組用于設置影響盒子中內容的形狀，另一組用于設置影響形狀元素周邊內容流的形狀。在圖2 中，我們看到一個被設置為圓形的形狀。其中左邊的圖形展示了外部形狀如何影響周邊的內容，而右邊的圖形展示了圓形中的內容如何受到內部形狀的影響。

圖2 外部形狀與內部形狀

這兩種形狀分別由不同級別的CSS Shapes 規范定義。其中shape-outside 屬性（在CSS Shapes Level 1 中定義）是唯一相對比較成熟的。本文不涉及shape-inside，因為目前還沒有瀏覽器實現它，也許在不久的將來會有吧。

shape-outside 屬性只能應用給浮動元素。這個屬性不改變元素自身的外觀，只會通過設置形狀影響其外部內容流。

在我們例子中的“Moon”部分，通過設置shape-outside: circle();實現了文本流環繞月亮圖片的效果（見圖3）。

.fig-moon {
 float: right;
 max-width: 40%;
 shape-outside: circle();
}

圖3 文本圍繞月亮圖片周圍的圓形實現了繞排

在解釋形狀構造原理之前，先了解一下shape-outside 如何影響布局。圖片文件本身的背景是黑色的，如果把這一區塊的背景改成其他顏色，我們會看得更清楚（見圖4）。圖片本身還是方形的，但文本流環繞著其中的圓形。在不支持CSS 形狀的瀏覽器中，文本會像往常一樣環繞矩形。

注意：如圖4 所示，文本流只繞排在浮動元素的左側。只能讓形狀的一側影響文本的行盒子。即使形狀右側有空間，文本也不會填進去。

1. 形狀函數

前面例子中的shape-outside 屬性使用了一個值：circle()。這是一個形狀函數，類似的形狀函數還有ellipse()、polygon()、inset()。前兩個分別用于定義橢圓形和多邊形，inset()則表示嵌入在盒子邊界內的矩形，也可以指定圓角，算是CSS 2.1 中clip 屬性的加強版，只是語法不同而已。

此處圓形和橢圓形的語法，類似于第5 章的放射性漸變的大小及位置的語法：

.shape-circle {
 /* 圓形接受一個半徑值和一個位置值 */
 shape-outside: circle(150px at 50%);
}
.shape-ellipse {
 /* 橢圓形接受兩個半徑值和一個位置值 */
 shape-outside: ellipse(150px 40px at 50% 25%);
}

與漸變函數類似，圓形和橢圓形函數也有合理的默認值。前面月亮圖片的circle()函數并未傳入參數，而默認的參數是以元素中心為圓心，以最近邊為半徑。

inset()函數需要傳入一組長度值，分別表示到上、右、下、左邊的距離，很像margin 和padding 簡寫。同樣，1~3 個值的外邊距和內邊距簡寫規則在這里也適用。此外，還可以通過round關鍵字指定圓角，隨后是半徑值，與border-radius 屬性的類似：

.shape-inset {
 /* 距離外部盒子的上、下邊各20 像素，
 * 距離外部盒子的左、右邊各30 像素，
 * 還有半徑為10 像素的圓角
 */
 shape-outside: inset(20px 30px round 10px);
}

相對復雜一些的是polygon()函數。這個函數接受一系列坐標對，用于在盒子表面指定多個點，坐標相對于盒子的左上角，最終把各個點連接起來就是要創建的形狀。在“Planets”部分，我們為土星創建了一個多邊形。

創建多邊形最簡單的一種方式就是使用CSS Shapes Editor 插件，它支持Chrome 和Opera。Chrome 和Opera 都支持CSS Shapes，而且會在檢查形狀元素時給出預覽。這個插件會添加額外的工具，因此既可以通過它看到形狀如何影響頁面，也可以通過創建并拖動控制點來創建新形狀（見圖5）。

圖5 在Chrome 中通過Shapes Editor 插件繪制的形狀

然后就可以把得到的多邊形復制粘貼到代碼中：

.fig-planet {
 float: right;
 max-width: 65%;
 shape-outside: polygon(41.85% 100%, 22.75% 92.85%, 5.6% 73.3%, 0.95% 52.6%, 5.6% 35.05%,
21.45% 17.15%, 37.65% 12.35%, 40% 0, 100% 0%, 100% 100%);
}

多邊形中每個點的坐標以百分比表示，這樣可以保證最大的靈活度。當然也可以在這里使用任意長度值，比如像素、em，甚至calc()表達式。

2. 形狀圖片

基于復雜的圖片創建多邊形會非常麻煩。好在我們可以直接在圖片的源文件上基于透明度來創建形狀。比如，可以比照預期的形狀新創建一張圖片。但土星的圖片已經是帶透明度的PNG格式了，因此可以直接通過它來生成形狀。我們要做的就是把shape-outside 的值由polygon()函數修改為指向該圖片的url()函數：

.fig-planet {
 float: right;
 max-width: 65%;
 shape-outside: url(img/saturn.png);
}

如果在Chrome 開發者工具里檢查這張圖片，會看到如圖6 所示的模樣。可以看到，圖片的透明度數據被用于生成形狀了。

圖6 圖片透明區域的輪廓被用于生成形狀

提示：只通過瀏覽器打開HTML 文件是不行的，就算瀏覽器支持CSS Shapes 也不行。必須通過Web 服務器取得這個頁面，這樣引用的圖片才會帶有合適的HTTP 首部信息，告訴瀏覽器該圖片與CSS 來自同一個域。這種安全機制是較新的瀏覽器才有的，是為了防止引用的文件對你的計算機造成危害。

默認情況下，形狀輪廓會沿圖片完全透明區域的邊緣生成，但這個值可以通過shape-imagethreshold 屬性來修改。默認值是0.0（完全透明），而較大的值（最大為1.0）意味著較高的不透明度也可以用于生成形狀邊界。比如，修改土星圖片的不透明度閾值為0.9，則半透明的土星環將不再被包含在形狀內，結果文本會覆蓋其上（見圖7）。

.fig-planet {
 float: right;
 max-width: 65%;
 shape-outside: url(img/saturn.png);
 shape-image-threshold: 0.9;
}

圖7 使用shape-image-threshold 提高不透明度閾值后，原來圖片中半透明的部分在生

3. 形狀盒子與邊距

除了使用形狀函數或圖片，還可以使用元素的參照盒子來生成形狀。乍一聽好像有點不對，畢竟元素盒子都是方形的。不過，形狀也能依照圓角生成。

比如，以前面的月亮圖片為例，如果我們想改變區塊背景的顏色，同時也去掉圖片周圍的黑色區域（如圖11-8 所示），那么可以在圖片上使用border-radius 來創建圓形。

.fig-moon {
 float: right;
 max-width: 40%;
 border-radius: 50%;
}

圖8 給月亮圖片應用border-radius

僅有圓角邊框還不能生成形狀，還得通過shape-outside 屬性告訴瀏覽器，以border-box作為生成形狀的依據。

.fig-moon {
 float: right;
 max-width: 40%;
 border-radius: 50%;
 shape-outside: border-box;
}

這樣外部形狀就變成了環繞元素邊框盒子的圓形。其他能生成形狀的參照盒子還有content-box、padding-box 和margin-box。margin-box 是個例外。因為形狀是基于浮動區域的，浮動區域也包含外邊距，所以這個關鍵字是專門為形狀定義的，并沒有box-sizing: margin-box 這種用法。

對于形狀而言，參照盒子為margin-box 時，形狀仍然會參照圓角邊框，但這樣一來就可以像定義常規的外邊距一樣，給月亮圖片周圍添加一些邊距了。

.fig-moon {
 float: right;
 max-width: 40%;
 border-radius: 50%;
 shape-outside: margin-box;
 margin: 2em;
}

這樣，文本會環繞著弧形的外邊距形狀排布。如果在Chrome 開發者工具中檢查圖片，可以看到此時形狀的樣子，還有原始的外邊距（見圖9）。

圖9 將margin-box 作為形狀的參照后，可以為形狀設置外邊距

如果想給更復雜的土星圖片添加外邊距，可以使用另一個屬性shape-margin，這個屬性用于給整個形狀添加外邊距，與創建形狀的方法無關（見圖10）。

.fig-planet {
 max-width: 65%;
 shape-outside: url(img/saturn.png);
 shape-margin: 1em;
}

圖10 為土星形狀添加shape-margin 屬性

剪切與蒙版

CSS 形狀雖然可以影響周圍文本流，卻不允許你修改元素自身的外觀。添加圓角邊框只是視覺上改變元素形狀的一種方式。實際上，通過把元素的部分區域變透明，是可以影響元素自身形狀的。

剪切（clipping）使用路徑形狀定義硬邊界，可以基于該邊界完全切換元素的可見性。蒙版（masking）不太一樣，它用于將元素的某些區域設置為更透明或更不透明。剪切會影響對象的響應區域，而蒙版不會。比如要觸發懸停，鼠標必須移到剪切后元素的可見區域。而對于加了蒙版的元素，無論鼠標下面的區域是否可見，只要位于該元素上，都會激活:hover 狀態。

一、剪切

剪切最早是在CSS 2.1 中通過clip 屬性引入的。但這個屬性只能應用給絕對定位的元素，而且只能把這些元素剪切為矩形（使用rect()函數）。沒勁！

好在新的clip-path 屬性提供了更多選擇。它可以使用CSS 形狀中的基本形狀函數定義如何剪切元素。它還能使用SVG 文檔剪切元素，只要通過URL 引用一個<clipPath>元素即可。

下面從使用形狀函數定義剪切路徑開始。這個特性之前只有Blink 和WebKit 內核的瀏覽器支持，而且除了不加前綴的屬性，還要使用加-webkit-前綴的屬性。為簡單起見，后面的例子只展示不加前綴的標準屬性。

“觀星指南”頁面中的所有區塊都是被剪切過的，因此都有一些向對角線傾斜（見圖11）。

圖11 頁面中的所有區塊都被剪切過，因此都有點傾斜

每個區塊都有一個stacked 類，其中使用多邊形函數指定了剪切路徑：

.stacked {
 clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0% 100%);
}

這個多邊形沒有前面土星的多邊形復雜，因此可以稍微深入地講解一下。多邊形中的每一個點都對應著一對空格分隔的值，值對之間以逗號隔開。

先從左上角開始，0 3vw 表示x 軸剪切長度為0，y 軸剪切長度為3vw。這里使用相對視口的單位保證角度以視口大小為參照。接下來的坐標是右上角坐標100% 0。第三個100% calc(100% -3vw)指距右下角3vw，它不能使用百分比表示，因為這個y 軸坐標是從上方開始計算的。最后，左下角的坐標是0 100%。

因為剪切路徑只影響元素渲染后的外觀，而不會影響頁面流，所以剪切后的元素之間會出現透明間隙（見圖11-12）。為消除間隙，可以給每個堆疊的區塊應用一個負外邊距，而且要比3vm稍大一些，好讓相鄰的區塊邊緣能彼此重疊。但我們只希望在支持clip-path 的瀏覽器中應用這個負外邊距，這時候正好可以用上@supports 規則。因為這些新的特效只在較新的瀏覽器中才存在，所以我們可以放心地這么寫：

@supports ((clip-path: polygon(0 0)) or
 (-webkit-clip-path: polygon(0 0))) {
 .stacked {
 margin-bottom: -3.4vw;
 }
}

圖12 如果只應用剪切，區塊之間會出現間隙

在@supports 規則塊中，我們測試了瀏覽器是否支持最小的多邊形（只有一個點）。增加這些保障后，區塊就可以完美地對齊了。而在不支持clip-path 的瀏覽器中，區塊也會像平常一樣上下相接，不會重疊。

使用SVG

可以使用polygon()、circle()、ellipse()和inset() 函數創建剪切路徑，與創建CSS形狀一樣。對于復雜的形狀，建議大家還是使用圖片編輯器來創建，然后再將最終的圖形作為剪切路徑的源。我們在頁面導航中使用的形狀就是這樣生成的，如圖13 所示。

圖13 導航區中復雜的形狀是基于SVG 源實現的剪切

使用圖形作為剪切源，需要先使用SVG 創建剪切路徑，然后再通過一個URL 引用到形狀函數中。首先，要在Illustrator、Sketch 或Inkscape 之類的圖形編輯器中創建想要的形狀。雖然不那么簡單，但還是可行的。

導航區塊本身是一個包含頁內鏈接的無序列表：

<nav class="stacked section nav-section inverted">
 <ul class="wrapper">
 <li><a href="#moon">The Moon</a></li>
 <li><a href="#sun">The Sun</a></li>
 <li><a href="#planets">Planets</a></li>
 <li><a href="#milky-way">Galaxy</a></li>
 <li><a href="#universe">Universe</a></li>
 </ul>
</nav>

在此，我們就不涉及導航本身的樣式了，大家只要知道這里用到了Flexbox 水平布局導航項目，將它們固定為100 像素見方的方塊就夠了。

然后，在支持SVG 的圖形編輯器（我們用的是Adobe Illustrator）中創建一張圖片。圖片的大小也是100 像素見方（見圖14）。其中的星球由兩個黑色的形狀構成，一個圓形和一個旋轉后的橢圓形。接著把這個圖片保存為SVG 格式，命名為clip.svg。保存過程因編輯器而異，這里

就不說了，我們只關注大體的流程。

圖14 使用Illustrator 創建的星球圖形

下面在代碼編輯器中打開生成的SVG 文件，看上去大概是這樣的：

<svg xmlns=http://www.w3.org/2000/svg width="100px" height="100px" viewBox="0 0 100 100">
 <circle cx="50" cy="50" r="45"/>
 <ellipse transform="matrix(-0.7553 0.6554 -0.6554 -0.7553 -12.053 54.99)" cx="50" cy="50"
rx="63.9" ry="12.8"/>
</svg>

為了把這個圖片轉換為剪切路徑，需要把其內容包裝在一個<clipPath>元素中，并添加一個ID 屬性：

<svg xmlns="SVG namespace"
 width="100px" height="100px" viewBox="0 0 100 100">
 <clipPath id="saturnclip">
 <circle cx="50" cy="50" r="40.1"/>
 <ellipse transform="matrix(0.7084 -0.7058 0.7058 0.7084 -20.7106 49.8733)" cx="50"
 cy="50" rx="62.9" ry="12.8"/>
 </clipPath>
</svg>

最后，就可以在CSS 中引用clip.svg 中的這個剪切路徑了：

.nav-section [href="#planets"] {
 clip-path: url(img/clip.svg#saturnclip);
}

這樣就可以把多個剪切源保存在一個SVG 文件中，然后通過URL 的片段ID 分別引用。

二、蒙版

“觀星指南”頁面的標題好像半隱于地球大氣層的后面（見圖15）。這種透明漸隱效果是通過蒙版實現的。

圖15 頁面標題“Stargazing”通過蒙版實現了漸隱效果

Safari 早在2008 年就實現了蒙版，使用的是非標準屬性-webkit-mask-image。這個屬性允許指定一張圖片，并以這張圖片作為加蒙版元素透明度層次的來源。作為蒙版的圖片中，每個像素都有一個阿爾法級別（alpha level），也就是透明度。如果蒙版圖片中的像素是透明的，那么加蒙版元素中對應的像素也不可見。相反，蒙版圖片中完全不透明的區域，對應的加蒙版元素的區域也會完全可見。蒙版圖片的顏色與此無關，因此灰度圖常用作蒙版。

除了圖片，還可以使用CSS 漸變來創建蒙版。頁面標題的蒙版效果就是這么做的：

.header-title {
 mask-image: radial-gradient(ellipse 90% 30% at 50% 50%,
 rgba(0,0,0,0) 45%,
 #000 70%);
 mask-size: 100% 200%;
}

相信大家都了解這個語法：mask-image 后面的值非常類似background-image 屬性的值，甚至也可以聲明多個蒙版。

除了指定蒙版圖片，還可以指定蒙版的大小和位置。對于我們這個例子而言，為了把蒙版放到文本底部，我們將它的高度聲明為兩倍，而沒有使用定位。如果我們在這里簡單地把漸變圖片移動到下面，那么蒙版圖片的上半部分就會是透明的，結果就是文本的上半部分不可見。圖16展示了漸變蒙版的大小和位置，以及它與文本的相對位置關系。

圖16 蒙版圖片看起來就像是位于文本上方

在WebKit 最初實現的基礎上，蒙版相關的屬性得以標準化和擴展，同時也支持了對應的SVG效果。沒錯，就像clip-path 一樣，SVG 中的蒙板也可以應用給HTML 內容。

.header-title {
 /*嵌入頁面中的CSS，指向嵌入同一頁面中的SVG <mask>元素*/
 mask: url(#ellipseMask);
}
與前面CSS 漸變等價的SVG 標記如下：
<mask id="ellipseMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
 <radialGradient id="radialfill" r="0.9" cy="1.1">
 <stop offset="45%" stop-color="#000"/>
 <stop offset="70%" stop-color="#fff"/>
 </radialGradient>
</mask>

與剪切路徑一樣，這里也需要使用objectBoundingBox 坐標系，按照0~1 的比例尺將蒙版縮放到與元素邊界匹配。SVG 蒙版元素本身還有一個maskContentUnits 屬性，這里也將其設置為與蒙版形狀相同的坐標系。

SVG 蒙版源使用明度值（luminance）而非阿爾法級別來應用蒙版。這意味著蒙版較暗的區域對應的加蒙版元素區域會較透明，而蒙版較亮的區域對應的加蒙版元素區域會較不透明。在前面SVG 蒙版的例子中，我們使用了黑白漸變。

瀏覽器會在你使用蒙版圖片時使用阿爾法級別，在你使用SVG 蒙版時使用明度值。在對標準的建議中，有一個mask-type 屬性可以切換這個應用蒙版的依據值。

另外，-webkit-前綴版與建議的標準版屬性之間也有一些差異。可以參考MDN 中WebKit實現的完整屬性和語法。

——

本文很大程度上跳出了沉悶單調的頁面盒子世界。我們探討了如何通過CSS 形狀美化頁面中的元素，以及如何通過剪切路徑畫出視覺邊界。使用蒙版則可以進一步控制界面中元素的可見性。

通過這些特效的學習，我們也看到了SVG 與CSS 結合的威力，也極大擴展了我們未來設計的想象空間。

——本文節選自《精通CSS：高級Web標準解決方案（第3版）》

CSS暢銷經典全面升級

CSS作為Web標準的一部分，是現代網頁設計中必不可少的關鍵元素。鑒于CSS標準化的快速發展，想要成為CSS高手，打造出令人驚艷、辨識度高的網站，就必須充分了解當前CSS規范各模塊的新特性、新技術和新思想。

本書是經典CSS參考指南，自第1版出版至今一直暢銷不衰。第3版針對當前瀏覽器支持度足夠好的CSS特性全面改寫，著眼于如何為更大、更復雜的網站編寫優雅、巧妙、易維護的代碼。兩位作者均是技術與寫作才能俱佳的開發高手，他們將自己對現代CSS實踐的深刻理解融入書中，結合大量復雜實現情景，清晰展示了如何利用新技術寫出高度靈活、易維護和可擴展的代碼，并讓這些代碼在不同瀏覽器和不同平臺上跑起來。

第1章　基礎知識

第2章　添加樣式

第3章　可見格式化模型

第4章　網頁排版

第5章　漂亮的盒子

第6章　內容布局

第7章　頁面布局與網格

第8章　響應式Web設計與CSS

第9章　表單與數據表

第10章　變換、過渡與動畫

第11章　高級特效

第12章　品控與流程

在線咨詢

上一篇：PHP 文件上傳：示例代碼和心得
下一篇：Java技術：SpringBoot集成FreeMarker生成word文件

您的項目需求

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

整合營銷服務商

個人收藏的必備網頁設計控件，也許正是你在尋找的（九）

進入正題!

1. 卸載vs code、及安裝的插件和個人配置信息

2. 重置vs code所有設置 （還原vs code出廠默認設置）

3. vs code發光字主題與插件 SynthWave '84 - VS Code theme

4. 取消修改synthwave主題的斜體注釋

5. 在vscode中,使用快捷鍵打開瀏覽器 預覽html頁面

修改默認瀏覽器

6. vs code背景圖片設置的幾種方法

方法1 修改workbench.desktop.main.css文件設置背景圖片

方法2 使用background插件

方法3 使用background-cover 背景插件

7. Browser Preview 內部瀏覽插件的使用

8. windos opacity 透明插件的使用

9. Bracket Pair Colorizer 代碼區塊提示插件

10.vscode高清代碼截圖插件

Polacode代碼截圖插件

CodeSnap 蘋果代碼截圖插件

11.better Comments 修改注釋顏色插件

12.koroFileHeader 文件頭部注釋和函數頭部注釋插件

13.vscode 字體推薦

14.vscode編輯markdown相關插件

Markdown Preview Enhanced 預覽插件

markdown PDF 插件

15.Prettier - Code formatter 插件

16.Community Material Theme插件

17.indent-rainbow 縮進插件

18.LeetCode 刷題插件

19.Material Icon Theme 文件圖標插件

20.VSCode Rainbow Fart彩虹屁語音插件

CSS Shapes

剪切與蒙版

您的項目需求

2. 重置vs code所有設置（還原vs code出廠默認設置）

5. 在vscode中,使用快捷鍵打開瀏覽器預覽html頁面