-
Notifications
You must be signed in to change notification settings - Fork 0
/
todo.html
219 lines (217 loc) · 34.9 KB
/
todo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CaiCai9426</title>
<meta name="description" content="菲菲Blog,陆续更新中">
<link rel="icon" href="/logo.png">
<meta name="theme-color" content="#3eaf7c">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-152x152.png">
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#3eaf7c">
<meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
<meta name="msapplication-TileColor" content="#000000">
<link rel="preload" href="/assets/css/86.styles.1708be3a.css" as="style"><link rel="preload" href="/assets/js/app.fa713eac.js" as="script"><link rel="preload" href="/assets/js/36.c527c4dc.js" as="script"><link rel="prefetch" href="/assets/js/38.8baf7629.js"><link rel="prefetch" href="/assets/js/0.c7a94944.js"><link rel="prefetch" href="/assets/js/1.75bc214a.js"><link rel="prefetch" href="/assets/js/2.4a593960.js"><link rel="prefetch" href="/assets/js/3.f69ab2b6.js"><link rel="prefetch" href="/assets/js/4.b6ef39fa.js"><link rel="prefetch" href="/assets/js/5.91f53b8d.js"><link rel="prefetch" href="/assets/js/6.7ab4526d.js"><link rel="prefetch" href="/assets/js/7.262318e7.js"><link rel="prefetch" href="/assets/js/8.6b00c1b6.js"><link rel="prefetch" href="/assets/js/9.49213d30.js"><link rel="prefetch" href="/assets/js/10.194074c7.js"><link rel="prefetch" href="/assets/js/11.28772604.js"><link rel="prefetch" href="/assets/js/12.473fa971.js"><link rel="prefetch" href="/assets/js/13.e7244ca3.js"><link rel="prefetch" href="/assets/js/14.9f35604a.js"><link rel="prefetch" href="/assets/js/15.92de29ce.js"><link rel="prefetch" href="/assets/js/16.5081d0f4.js"><link rel="prefetch" href="/assets/js/17.8d7bbf3a.js"><link rel="prefetch" href="/assets/js/18.8b379100.js"><link rel="prefetch" href="/assets/js/19.e6213855.js"><link rel="prefetch" href="/assets/js/20.09855c55.js"><link rel="prefetch" href="/assets/js/21.deccda74.js"><link rel="prefetch" href="/assets/js/22.c3da8c3e.js"><link rel="prefetch" href="/assets/js/23.0f2bdda6.js"><link rel="prefetch" href="/assets/js/24.23916d1d.js"><link rel="prefetch" href="/assets/js/25.4a28d9a1.js"><link rel="prefetch" href="/assets/js/26.638f323d.js"><link rel="prefetch" href="/assets/js/27.9104930e.js"><link rel="prefetch" href="/assets/js/28.f4a9d74b.js"><link rel="prefetch" href="/assets/js/29.a4ffc45d.js"><link rel="prefetch" href="/assets/js/30.34c1be94.js"><link rel="prefetch" href="/assets/js/31.fc4459e1.js"><link rel="prefetch" href="/assets/js/32.6fa53274.js"><link rel="prefetch" href="/assets/js/33.d39ccb38.js"><link rel="prefetch" href="/assets/js/34.95667869.js"><link rel="prefetch" href="/assets/js/35.1c9f7cb6.js"><link rel="prefetch" href="/assets/js/37.91db206d.js"><link rel="prefetch" href="/assets/js/39.2b9663c2.js"><link rel="prefetch" href="/assets/js/40.4879e3dd.js"><link rel="prefetch" href="/assets/js/41.bd45403e.js"><link rel="prefetch" href="/assets/js/42.bab6410e.js"><link rel="prefetch" href="/assets/js/43.b6bad706.js"><link rel="prefetch" href="/assets/js/44.3ef4ed34.js"><link rel="prefetch" href="/assets/js/45.4eaec123.js"><link rel="prefetch" href="/assets/js/46.89dbff86.js"><link rel="prefetch" href="/assets/js/47.ec3a4eb4.js"><link rel="prefetch" href="/assets/js/48.1483f745.js"><link rel="prefetch" href="/assets/js/49.ed95d1ac.js"><link rel="prefetch" href="/assets/js/50.1969a022.js"><link rel="prefetch" href="/assets/js/51.8ba405ec.js"><link rel="prefetch" href="/assets/js/52.d10260ca.js"><link rel="prefetch" href="/assets/js/53.4521a8db.js"><link rel="prefetch" href="/assets/js/54.9ad871d9.js"><link rel="prefetch" href="/assets/js/55.58623269.js"><link rel="prefetch" href="/assets/js/56.543fae7f.js"><link rel="prefetch" href="/assets/js/57.c5d65fc9.js"><link rel="prefetch" href="/assets/js/58.04c7d745.js"><link rel="prefetch" href="/assets/js/59.b512423b.js"><link rel="prefetch" href="/assets/js/60.320eda07.js"><link rel="prefetch" href="/assets/js/61.5aae5d3f.js"><link rel="prefetch" href="/assets/js/62.9dfe9e13.js"><link rel="prefetch" href="/assets/js/63.25b34838.js"><link rel="prefetch" href="/assets/js/64.d12d5002.js"><link rel="prefetch" href="/assets/js/65.42b15a91.js"><link rel="prefetch" href="/assets/js/66.cfed3a8a.js"><link rel="prefetch" href="/assets/js/67.1a3b15e5.js"><link rel="prefetch" href="/assets/js/68.9868ce12.js"><link rel="prefetch" href="/assets/js/69.2903063c.js"><link rel="prefetch" href="/assets/js/70.9b5ebefd.js"><link rel="prefetch" href="/assets/js/71.4d376bf0.js"><link rel="prefetch" href="/assets/js/72.c26dd68c.js"><link rel="prefetch" href="/assets/js/73.0c199081.js"><link rel="prefetch" href="/assets/js/74.a575f917.js"><link rel="prefetch" href="/assets/js/75.3bb9db7f.js"><link rel="prefetch" href="/assets/js/76.77eed2ca.js"><link rel="prefetch" href="/assets/js/77.f9cdb120.js"><link rel="prefetch" href="/assets/js/78.81eb4ea8.js"><link rel="prefetch" href="/assets/js/79.bdfedc4c.js"><link rel="prefetch" href="/assets/js/80.80a3c0e7.js"><link rel="prefetch" href="/assets/js/81.1e44050b.js"><link rel="prefetch" href="/assets/js/82.6ac951ca.js"><link rel="prefetch" href="/assets/js/83.9eec4ec5.js"><link rel="prefetch" href="/assets/js/84.43236687.js"><link rel="prefetch" href="/assets/js/85.b06d6363.js">
<link rel="stylesheet" href="/assets/css/86.styles.1708be3a.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/" class="home-link router-link-active"><!----><span class="site-name">
CaiCai9426
</span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><nav class="nav-links can-hide"><div class="nav-item"><a href="/deploy/jenkins_cicl.html#jenkins" class="nav-link">blog</a></div><div class="nav-item"><a href="/project/" class="nav-link">项目</a></div><!----></nav></div></header><div class="sidebar-mask"></div><div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/deploy/jenkins_cicl.html#jenkins" class="nav-link">blog</a></div><div class="nav-item"><a href="/project/" class="nav-link">项目</a></div><!----></nav><ul class="sidebar-links"><li><div class="sidebar-group first collapsable"><p class="sidebar-heading open"><span>vue文档</span><span class="arrow down"></span></p><ul class="sidebar-group-items"><li><a href="/vue/axios-x.html" class="sidebar-link">axios 封装</a></li><li><a href="/vue/axios.html" class="sidebar-link">axios </a></li><li><a href="/vue/compent.html" class="sidebar-link">基于Vue的组件库</a></li><li><a href="/vue/elementUi_table.html" class="sidebar-link">elementUi_table</a></li><li><a href="/vue/vue-all.html" class="sidebar-link">vue 记录</a></li><li><a href="/vue/vue-auth.html" class="sidebar-link">vue 权限控制</a></li><li><a href="/vue/vue-count-to.html" class="sidebar-link">vue-count-to</a></li><li><a href="/vue/vue-deploy.html" class="sidebar-link">vue项目部署</a></li><li><a href="/vue/vue-router.html" class="sidebar-link">Vue-router 路由的基本使用 以及优雅使用keep-alive</a></li><li><a href="/vue/vue-youhua.html" class="sidebar-link">Vue 项目优化</a></li><li><a href="/vue/vue_expend_excel.html" class="sidebar-link">导出信息为excel文件</a></li><li><a href="/vue/vue_mark_scroll.html" class="sidebar-link">vue 移动端屏蔽滑动的遮罩层</a></li><li><a href="/vue/vue_props.html" class="sidebar-link">vue 父子组件时间传递</a></li></ul></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>部署</span><span class="arrow right"></span></p><!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>JS文档</span><span class="arrow right"></span></p><!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>gulp文档</span><span class="arrow right"></span></p><!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>git相关文档</span><span class="arrow right"></span></p><!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>Webpack</span><span class="arrow right"></span></p><!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>CSS</span><span class="arrow right"></span></p><!----></div></li></ul></div><div class="page"><div class="content"><p>[微信h5页面开发遇到的坑](https://www.qdfuns.com/article/13989/8fed58c72fd4be96e5fa3a9429ccea2a.html</p><p><a href="https://www.jianshu.com/p/31ad32e7ec13" target="_blank" rel="noopener noreferrer">vue-cli中vue-scroller的详细用法，上拉加载下拉刷新,vue-axios获取数据的详细过程<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><p><a href="https://github.com/hbxywdk" target="_blank" rel="noopener noreferrer">hbxywdk<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a><a href="https://aotu.io/notes/2016/11/08/first-mobile-rebuild/" target="_blank" rel="noopener noreferrer">Hera-打通小程序,Web,iOS,Android的全平台混合框架<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a><a href="https://juejin.im/entry/5849186a128fe1006c73b0f3" target="_blank" rel="noopener noreferrer">你真的知道怎么用 javascript 来写一个倒计时吗 ?<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><p><a href="https://juejin.im/post/5acc3a3f51882555867fbe8a" target="_blank" rel="noopener noreferrer">Web 端 实现 app “输入验证码 ”的效果<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><p><a href="https://orangexc.xyz/2016/12/20/3D-parallax-effect/" target="_blank" rel="noopener noreferrer">3D 视差效果<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><p><a href="https://segmentfault.com/a/1190000014963269?utm_source=channel-hottest" target="_blank" rel="noopener noreferrer">Vue页面骨架屏<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><p><a href="https://juejin.im/post/59013d2c0ce46300614ebe70" target="_blank" rel="noopener noreferrer">HTML5 进阶系列：indexedDB 数据库<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><p><a href="https://github.com/lin-xin/blog" target="_blank" rel="noopener noreferrer">别人的案例 不错<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h1 id="webpack"><a href="#webpack" aria-hidden="true" class="header-anchor">#</a> webpack</h1><p><a href="https://github.com/lin-xin/blog/issues/10" target="_blank" rel="noopener noreferrer">提高 webpack 构建 Vue 项目的速度<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h1 id="vue"><a href="#vue" aria-hidden="true" class="header-anchor">#</a> Vue</h1><p><a href="https://juejin.im/post/5adf0085518825673123da9a" target="_blank" rel="noopener noreferrer">当面试官问你Vue响应式原理，你可以这么回答他<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a><a href="https://juejin.im/post/5b29c3bde51d45588d4d7110#heading-32" target="_blank" rel="noopener noreferrer">浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h1 id="koa2"><a href="#koa2" aria-hidden="true" class="header-anchor">#</a> koa2</h1><p><a href="https://juejin.im/post/5abc451ff265da23a2292dd4" target="_blank" rel="noopener noreferrer">Koa2 之文件上传下载<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h1 id="gulp"><a href="#gulp" aria-hidden="true" class="header-anchor">#</a> gulp</h1><p><a href="https://github.com/lin-xin/blog/issues/1" target="_blank" rel="noopener noreferrer">gulp自动化压缩合并、加版本号解决方案<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h1 id="websocker"><a href="#websocker" aria-hidden="true" class="header-anchor">#</a> websocker</h1><p><a href="https://juejin.im/post/5a4e6a43f265da3e303c4787" target="_blank" rel="noopener noreferrer">WebSocket：5分钟从入门到精通<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h1 id="css"><a href="#css" aria-hidden="true" class="header-anchor">#</a> css</h1><p><a href="https://juejin.im/entry/596d7e8a5188254b7b53db03" target="_blank" rel="noopener noreferrer">纯 CSS 实现波浪效果<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h1 id="canvas"><a href="#canvas" aria-hidden="true" class="header-anchor">#</a> Canvas</h1><p><a href="https://github.com/lin-xin/blog/issues/15" target="_blank" rel="noopener noreferrer">HTML5 进阶系列：canvas 动态图表 #15<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a><a href="https://juejin.im/post/595599e75188250d99181801" target="_blank" rel="noopener noreferrer">移动端图片上传旋转、压缩的解决方案<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>
qunaer 网
border.css</p><div class="language-css extra-class"><pre class="language-css"><code><span class="token function">ellipsis</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden
<span class="token property">white-space</span><span class="token punctuation">:</span> nowrap
<span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@charset</span> <span class="token string">"utf-8"</span><span class="token punctuation">;</span></span>
<span class="token selector">.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-topleft,
.border-topright,
.border-rightleft,
.border-rightbottom,
.border-bottomleft</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"\0020"</span><span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* border
* 因，边框是由伪元素区域遮盖在父级
* 故，子级若有交互，需要对子级设置
* 定位 及 z轴
*/</span>
<span class="token selector">.border::before</span> <span class="token punctuation">{</span>
<span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 1px solid #eaeaea<span class="token punctuation">;</span>
<span class="token property">transform-origin</span><span class="token punctuation">:</span> 0 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before</span> <span class="token punctuation">{</span>
<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after</span> <span class="token punctuation">{</span>
<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before</span> <span class="token punctuation">{</span>
<span class="token property">border-top</span><span class="token punctuation">:</span> 1px solid #eaeaea<span class="token punctuation">;</span>
<span class="token property">transform-origin</span><span class="token punctuation">:</span> 0 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after</span> <span class="token punctuation">{</span>
<span class="token property">border-right</span><span class="token punctuation">:</span> 1px solid #eaeaea<span class="token punctuation">;</span>
<span class="token property">transform-origin</span><span class="token punctuation">:</span> 100% 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before</span> <span class="token punctuation">{</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #eaeaea<span class="token punctuation">;</span>
<span class="token property">transform-origin</span><span class="token punctuation">:</span> 0 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after</span> <span class="token punctuation">{</span>
<span class="token property">border-left</span><span class="token punctuation">:</span> 1px solid #eaeaea<span class="token punctuation">;</span>
<span class="token property">transform-origin</span><span class="token punctuation">:</span> 0 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before</span> <span class="token punctuation">{</span>
<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after</span> <span class="token punctuation">{</span>
<span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after</span> <span class="token punctuation">{</span>
<span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before</span> <span class="token punctuation">{</span>
<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max--moz-device-pixel-ratio</span><span class="token punctuation">:</span> 1.49<span class="token punctuation">)</span>, <span class="token punctuation">(</span><span class="token property">-webkit-max-device-pixel-ratio</span><span class="token punctuation">:</span> 1.49<span class="token punctuation">)</span>, <span class="token punctuation">(</span><span class="token property">max-device-pixel-ratio</span><span class="token punctuation">:</span> 1.49<span class="token punctuation">)</span>, <span class="token punctuation">(</span><span class="token property">max-resolution</span><span class="token punctuation">:</span> 143dpi<span class="token punctuation">)</span>, <span class="token punctuation">(</span><span class="token property">max-resolution</span><span class="token punctuation">:</span> 1.49dppx<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment">/* 默认值，无需重置 */</span>
<span class="token punctuation">}</span>
<span class="token selector">@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),
(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
(min-resolution: 144dpi) and (max-resolution: 239dpi),
(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx)</span> <span class="token punctuation">{</span>
<span class="token selector">.border::before</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 200%<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 200%<span class="token punctuation">;</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before</span> <span class="token punctuation">{</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span>.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after</span> <span class="token punctuation">{</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleX</span><span class="token punctuation">(</span>.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min--moz-device-pixel-ratio</span><span class="token punctuation">:</span> 2.5<span class="token punctuation">)</span>, <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span><span class="token punctuation">:</span> 2.5<span class="token punctuation">)</span>, <span class="token punctuation">(</span><span class="token property">min-device-pixel-ratio</span><span class="token punctuation">:</span> 2.5<span class="token punctuation">)</span>, <span class="token punctuation">(</span><span class="token property">min-resolution</span><span class="token punctuation">:</span> 240dpi<span class="token punctuation">)</span>, <span class="token punctuation">(</span><span class="token property">min-resolution</span><span class="token punctuation">:</span> 2.5dppx<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector">.border::before</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 300%<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 300%<span class="token punctuation">;</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>.33333<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before</span> <span class="token punctuation">{</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span>.33333<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after</span> <span class="token punctuation">{</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleX</span><span class="token punctuation">(</span>.33333<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></div><div class="content edit-link"><!----><!----></div><!----></div></div></div>
<script src="/assets/js/36.c527c4dc.js" defer></script><script src="/assets/js/app.fa713eac.js" defer></script>
</body>
</html>