# 前端笔记

# CSS:渐变色文字

h1 {
  font-size: 4rem;
  background: linear-gradient(to left, rgb(112, 101, 214), rgb(230, 106, 213));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}
1
2
3
4
5
6
7

效果:

mark

# CSS:美化单选按钮

以下方法利用label::before伪元素覆盖默认按钮,另外可以用appearance='none',在默认样式上修改,详见:MDN <input type="radio"> (opens new window)

HTML:

<div>
  <input type="radio" name="option" id="radio_1">
  <label for="radio_1">选项1</label>
</div>
<div>
  <input type="radio" name="option" id="radio_2">
  <label for="radio_2">选项2</label>
</div>
1
2
3
4
5
6
7
8

CSS:

input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  font-size: 1.25rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

input[type="radio"] + label::before {
  content: "";
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 50%;
}

input[type="radio"]:checked + label::before {
  background: url(./icons/checked.svg);
  background-size: cover;
}
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

效果:

mark

# CSS:自定义对话框

纯CSS实现自定义形状的对话框。

HTML:

<div class="box"></div>
1

CSS:

.box {
  width: 200px;
  height: 100px;
  background-color: azure;
  border-radius: 20px;
  position: relative;
}

.box::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-25px);
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 30px solid azure;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果:

mark

# CSS:修改滑块样式

HTML:

<div>
  <label for="slider"></label>
  <input type="range" name="range" id="slider" min="5" max="10" step="0.01">
</div>
1
2
3
4

CSS:

 /* webkit */
input[type="range"] {
  -webkit-appearance: none;
  outline: none;
  background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right,#12fbc5, #fbff0f);
  border-radius: 6px;
  height: 10px;
  display: inline-flex;
  align-items: center;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: linear-gradient(to top, #14cadb, #9ae8fb);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 1px solid #fff;
  cursor: pointer;
}

/* moz */

input[type=range]::-moz-range-track {
  background: linear-gradient(to right,#12fbc5, #fbff0f);
  border-radius: 6px;
  height: 10px;
  display: inline-flex;
  align-items: center;
}

input[type=range]::-moz-range-thumb {
  background: linear-gradient(to top, #14cadb, #9ae8fb);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 1px solid #fff;
  cursor: pointer;
}
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

效果:

mark

相关文章:

How to Style Input Type Range in Chrome, Firefox, and IE (opens new window)

A Sliding Nightmare: Understanding the Range Input (opens new window)

# VScode:去掉多余空行

打开vscode,执行菜单Edit -> Replace,或使用快捷键crl + H,然后使用正则表达式:^\s*\n ,替换内容为空,即可删除所有空行。

VScode

# ES6导入模块错误

ES6导入模块错误Cannot use import statement outside a module,出现此错误需要在script标签中加入type="module"属性。

<script type='module' src='main.js'>
1

# Grid 网格布局参考

# CSS属性

# CSS函数

相关链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout (opens new window)

疑问?

请在钉钉群:21935218交流。群内除聚集众多开发者,还有最新动态、视频教程、智能客服@宅小呗、答疑、直播、下载等实用功能。如需宅家呗提供技术支持,请加钉钉好友:zjbcool

Verge3D知识社区 客服
上次更新: 2020-8-16 12:51:23