用惯了框架和 UI 库，感觉对 CSS 的基础又有些模糊了。本文将列举一些 CSS 实用的知识点，想到哪就写到哪吧！

一、Animation

Animation 使用起来并不难，但是因为属于简写属性且有六个动画属性，所以很容易混淆。

  • animation-name
    • 规定需要绑定到选择器的 keyframe 名称
  • animation-duration
    • 规定完成动画所花费的时间，以秒或毫秒计
  • animation-timing-function:linear|ease|ease-in|ease-out|ease-in-out|…
    • 规定动画的速度曲线
  • animation-delay
    • 规定在动画开始之前的延迟
  • animation-iteration-count:n|infinite
    • 规定动画应该播放的次数
  • animation-direction:normal|alternate
    • 规定是否应该轮流反向播放动画

此外，我们可能有动画停在最后一帧的需求，不要忘了 CSS3 的属性 animation-fill-mode

  • animation-fill-mode : none | forwards | backwards | both;
    • forwards: 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
    • backwards: 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
    • both: 向前和向后填充模式都被应用

有的时候，动画也不需要自己写，可以多参考参考：Animate.css

二、box-sizing

在 CSS 中一提到盒模型，就会提到 box-sizing 属性，它有俩个重要属性值：

1
box-sizing: border-box|content-box;

默认是正常盒模型，也就是：CSS 定义的宽高只包含 Content 的宽高。而如果设置 border-box，那么就是：IE盒模型，CSS 定义的宽高包括了 Content，Padding 和 Border。

三、清除浮动的三种方式

1.伪类法

1
2
3
4
5
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

2.元素法，使用 clear: both;，与伪类法的区别就是有没有实际的元素；
3.利用 overflow 属性，应用值为 hidden 或 auto 的 overflow 属性有一个有用的副作用，这会自动清理包含的任何浮动元素；

1
2
3
4
.jartto {
　background: yellow;
　overflow:hidden;
}

可以参考这篇文章：CSS 清除浮动的几种方式

四、定宽比

1
<div class="constant-width-to-height-ratio"></div>

CSS

1
2
3
4
5
.constant-width-to-height-ratio {
  background: #333;
  width: 50%;
  padding-top: 50%;
}

五、修改滚动条默认样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Document scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* Scrollable element */
.some-element::webkit-scrollbar {
}

六、控制文本选中的颜色

先来段文本：

1
<p class="custom-text-selection">Select some of this text.</p>

使用 ::selection 伪类来设置颜色：

1
2
3
4
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

此外，通过 user-select: none 来设置文本不可被选择：

1
2
3
.unselectable {
  user-select: none;
}

七、简单的圆环 Loading

先设置元素：

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

再定义一个圆环样式：

1
2
3
4
5
6
7
8
9
.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

最后，添加动画效果：

1
2
3
4
5
6
7
8
@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

八、雕刻的文字效果

通过设置 0px 的水平阴影和 2px 的垂直阴影，同时将阴影调成白色，造成视觉上雕刻的感觉。

1
2
3
4
5
6
.etched-text {
  text-shadow: 0 2px white;
  font-size: 1.5rem;
  font-weight: bold;
  color: #b8bec5;
}

这里需要注意两点：
1.深色背景有利于此效果；
2.文字颜色适当的浅一些，形成褪色效果；

九、居中布局的几种方式

1.使用 flex：

1
2
3
4
5
.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
}

2.使用 grid：

1
2
3
4
5
.grid-centering {
  display: grid;
  justify-content: center;
  align-items: center;
}

3.行高辅助：

1
2
3
4
5
6
.box {
  width: 100%;
  height: 300px;
  line-height: 300px;
  text-align: center;
}

十、使用渐变

文字渐变：

1
2
3
4
5
.gradient-text {
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

说明：

  • background: -webkit-linear-gradient(…) 为文字设置渐变背景
  • webkit-text-fill-color: transparent 使用透明色填充文字
  • webkit-background-clip: text 用文本剪辑背景，用渐变背景填充文本作为颜色

十一、0.5px 问题

也就是我们常说的 Hairline 问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.hairline-border {
  box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.25px;
  }
}

十二、文本下划线动画

html:

1
<p class="hover-underline-animation">Hover this text to see the effect!</p>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}
.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

十三、CSS 定义和使用变量

1
2
3
4
5
6
7
8
9
10
11
:root {
  --base-bottom-margin: 20px;
  --base-line-height:   120%;
  --text-color:         gray;
}
h1 {
  margin-bottom: var( --base-bottom-margin );
  font-size: 42px;
  line-height: var( --base-line-height );
  color: var( --text-color );
}

十四、按钮点击效果－扩散光圈

1
2
3
<button class="mouse-cursor-gradient-tracking">
  <span>Hover me</span>
</button>
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
.mouse-cursor-gradient-tracking {
  position: relative;
  background: #7983ff;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  border: none;
  color: white;
  cursor: pointer;
  outline: none;
  overflow: hidden;
}
.mouse-cursor-gradient-tracking span {
  position: relative;
}
.mouse-cursor-gradient-tracking::before {
  --size: 0;
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, pink, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}
.mouse-cursor-gradient-tracking:hover::before {
  --size: 200px;
}
1
2
3
4
5
6
7
var btn = document.querySelector('.mouse-cursor-gradient-tracking')
btn.onmousemove = function(e) {
  var x = e.pageX - btn.offsetLeft
  var y = e.pageY - btn.offsetTop
  btn.style.setProperty('--x', x + 'px')
  btn.style.setProperty('--y', y + 'px')
}

需要注意的是：如果该元素的父元素有 position: relative，我们也需要减去父元素的 offset：

1
2
var x = e.pageX - btn.offsetLeft - btn.offsetParent.offsetLeft
var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop

十五、使用 hover 实现弹出菜单

先来定义 hover 容器：

1
2
3
4
5
<div class="reference">
  <div class="popout-menu">
    Popout menu
  </div>
</div>

再来定义样式：

1
2
3
4
5
6
7
8
9
10
11
.reference {
  position: relative;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
}
.reference:hover > .popout-menu {
  visibility: visible;
}

这里有两个问题：
其一，因为 popout-menu 是 reference 的子容器，所以悬停父容器，子容器并不会收缩；
其二，这里子元素使用了绝对定位，所以多个元素需要注意重叠问题；

十六、重置所有样式

通过一个属性，将样式重置到默认状态：

1
2
3
.reset-all-styles {
  all: initial;
}

十七、CSS 实现锯齿

html：

1
2
3
<div class="banner-vertical"></div>
<div class="banner-horizontal"></div>
<div class="banner"></div>

scss：

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
body { margin: 2em; }
div { height: 150px; margin-bottom: 15px; }

@mixin saw-tooth-vertical($width: 12px, $bg: #fff) {
  background-image:
    /* Top jagged */
    linear-gradient(135deg, $bg 50%, transparent 50%),
    linear-gradient(225deg, $bg 50%, transparent 50%),
    /* Bottom jagged */
    linear-gradient(45deg, $bg 50%, transparent 50%),
    linear-gradient(-45deg, $bg 50%, transparent 50%);
  background-position:
    /* Top jagged */
    top left, top left,
    /* Bottom jagged */
    bottom left, bottom left;
  background-size: $width $width;
  background-repeat: repeat-x;
}
@mixin saw-tooth-horizontal($width: 12px, $bg: #fff) {
  background-image:
    /* Left jagged */
    linear-gradient(135deg, $bg 50%, transparent 50%),
    linear-gradient(45deg, $bg 50%, transparent 50%),
    /* Right jagged */
    linear-gradient(-135deg, $bg 50%, transparent 50%),
    linear-gradient(-45deg, $bg 50%, transparent 50%);
  background-position:
    /* Left jagged */
    top left, top left,
    /* Right jagged */
    top right, top right;
  background-size: $width $width;
  background-repeat: repeat-y;
}
.banner-vertical {
  background-color: yellowgreen;
  @include saw-tooth-vertical();
}

.banner-horizontal {
  background-color: crimson;
  @include saw-tooth-horizontal();
}

@mixin saw-tooth($width: 12px, $bg: #fff) {
  background-image:
    /* Top jagged */
    linear-gradient(135deg, $bg 50%, transparent 50%),
    linear-gradient(225deg, $bg 50%, transparent 50%),
    /* Bottom jagged */
    linear-gradient(45deg, $bg 50%, transparent 50%),
    linear-gradient(-45deg, $bg 50%, transparent 50%),
    /* Left jagged */
    linear-gradient(135deg, $bg 50%, transparent 50%),
    linear-gradient(45deg, $bg 50%, transparent 50%),
    /* Right jagged */
    linear-gradient(-135deg, $bg 50%, transparent 50%),
    linear-gradient(-45deg, $bg 50%, transparent 50%);
  background-position:
    /* Top jagged */
    top left, top left,
    /* Bottom jagged */
    bottom left, bottom left,
    /* Left jagged */
    top left, top left,
    /* Right jagged */
    top right, top right;
  background-size: $width $width;
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-y, repeat-y, repeat-y, repeat-y;
}

.banner {
  background-color: skyblue;
  @include saw-tooth();
}

具体实例可参考：CSS saw-tooth borders

十八、控制兄弟元素

使用 :not，控制所有兄弟元素的 hover 状态，而不控制当前：

1
2
3
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}

十九、系统默认字体设置

1
2
3
4
.system-font-stack {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

二十、总结

文中主要示例都来参考自30 Seconds of CSS，当然也适当的补充了一些相关知识，总的来说，本文其实更像是一篇 CSS 实用笔记，目的就是对基础知识进行一次简单回顾。