整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、图像灯箱 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后
你不用拼过聪明人，你只需要拼过那些懒人 你就一定会超越大部分人!
第一步: 卸载软件
注意:此步骤虽然删掉了应用软件，但是此时重新安装会发现之前下载的插件和个人配置信息都还会重新加载出来，所以继续进行以下步骤：第二步: 找到下图中文件夹的目录，然后将之删除，即可彻底清除已安装的插件个个人配置信息
第三步:
路径是: C:\Users\Administrator\AppData\Roaming\Code
注意:AppData默认是隐藏文件夹解决问题场景: 配置失误，导致vscode无法使用，如窗口缩放太大，快捷键失效。
打开如目录 例如: C:\Users\Administrator\AppData\Roaming\Code\User用记事本打开目录下的settings.json，修改里面的对应配置可以解决对应的问题，重置的话全部删除就好了!
.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);
}在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" ]
}
注意: 路径是用的正斜杠打开synthwave-color-theme文件
位置: C:\Users\Administrator\.vscode\extensions\robbowen.synthwave-vscode-0.1.5\themes在synthwave-color-theme文件中, 搜索: italic 把fontStyle的值全部清空, 然后重启vscode 斜体注释就取消了!
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配置,例如: 把默认浏览器配置为火狐浏览器,如下图:
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自动软件更新后 背景会消失，需要重新设置!在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,//是否使用默认图片如下图:
介绍: 这个插件的原理其实也就是修改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更新版本时会导致背景图消失，需要手动重新设置, 所以这种方法跟第一种其实也差不多! 只不过选择图片方便了一点!这个插件的作用就是快速的在vscode内部使用浏览器预览html页面效果, 在插件市场搜索Browser Preview
安装完成后，在Bar上多出一个图标，点击图标就可以在VSCode里打开浏览器了 ,
默认情况下打开的是vscode的官方网站, 如果要配置到我们自己的站点目录方法如下:
打开设置，然后找到Extensions,再找到Browser Preview,找到Start Url写上你默认打开的地址就可以了。效果如下:
安装好后，需要重启一下VSCode，就可以出现透明效果了。
插件的设置: 打开设置界面，在左边找到Extensions选项卡，然后找到Windows opacity进行设置
这里边只有一个设置项，就是Opacity，也就是我们要设置的透明度，值从0-255,数值越小透明度越高，数值越大透明度越低。如果想关闭透明 设置透明度255即可!!为我们自动查找匹配标签开始结尾，括号匹配。从此再也不用花时间再成对标签或者括号开始与结尾的查找上了, 提高了工作效率
虽然vscode也自带了 标签，括号的代码区块提示，但是个人觉得不够明显!! 所以推荐这款插件
进入插件，在搜索栏上搜索, Bracket Pair Colorizer 然后找到如果插件，直接点击Install按钮进行安装
安装后 vscode重启 效果如下:
有兴趣的同学 可以找到File-->Preferences-->settings-->Extensions-->BracketPair 进行更多设置 这里就不多讲了!这个插件就是可以快速生成漂亮的代码截图， 比如要在博客里放置一个漂亮的代码截图，或者是快速分享到其它网络平台 都可以使用这个截图插件 进行代码截图 非常漂亮!!
打开VSCode中的插件，搜索 Polacode，这个你可以找到多个版本，这里我推荐的是 2020版本 点击install进行安装
使用方法
安装完成后,先打开你要分享的代码,然后按Ctrl + Shift + p 打开命令面板,然后再输入框中输入Polacode,就可以打开使用了把自己想截图的代码拖拽选中后 就可以点击右边的截图按钮，生成图片了!
也是一个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"
}在代码中 注释的颜色 默认是灰色的 ，可能你会觉得不好看 那么 就可以使用这款插件来让注释更加漂亮
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!
作用是生成文件头部注释和函数注释 , 但这个插件可以支持所有主流语言生成注释!
安装完成后可以新建一个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)外的其他内容，均可尝试设置为汉字，方便查看Consolas在windows下是一款很好看的字体
同时两款值得推荐的字体是 Source Code Pro和Fira Code, 可以在settings.json中进行配置!
也可以直接修改settings.json配置文件 添加如下配置:
"editor.fontFamily": "Fira Code", //字体
"editor.fontSize": 12, //字体大小
"editor.fontWeight":"normal", //字体粗细
"editor.fontLigatures":true, //是否字体连字安装完成后重启vscode即可
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 的上下文菜单了
这款插件的作用就是可以在保存的时候自动代码格式化,
直接在插件市场搜索它，并安装后重启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 的自定义设置
打开vscode插件市场搜索Community Material Theme 进行安装
然后点击图标下面的 set Color Theme按钮切换主题，如图：
使缩进更具可读性的简单扩展
打开vscode插件市场搜索indent-rainbow 直接安装即可!
插件效果如下：
它的作用就是刷算法题 可以在vscode内部进行测试!
打开vscode插件市场搜索LeetCode 进行安装
安装完成之后需要登录!
登录的时候有国际版 和 中国版 的选择 我们 这里选择的是中国版! 如下图然后输出用户名与密码就可以登录了! 登录成功后如下图所示!
就可以刷题了!
这款插件的作用就是会让vscode的文件产生好看的文件图标
在插件市场中搜索Material Icon Theme 进行安装 后重启vscode即可
效果如下:
这个插件其实我认为没什么 多大的用处，但是 安装上玩玩倒是可以的!!
在插件市场搜索: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 是一个新标准，旨在让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章 品控与流程
*请认真填写需求信息，我们会在24小时内与您取得联系。
