# 前端笔记

CSS：渐变色文字
CSS：美化单选按钮
CSS：自定义对话框
CSS：修改滑块样式
VScode：去掉多余空行
ES6导入模块错误
Grid 网格布局参考
- CSS属性
- CSS函数

# 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">

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>

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;
}