CSS知识点：text-align-last段落最后一行设置对齐方式、transform:rotateY()翻转、渐变文字、column count列属性、平滑滚动、placeholder伪元素与selection伪类

一、text-align-last 段落最后一行设置对齐方式

　　text-align-last 属性规定如何对齐文本的最后一行。

　　注意：text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。

　　详见：text-align-last 属性

　　遇到问题：只有一行div时，设置div宽度 80px，设置两端对齐 text-align: justify; 文字不生效。加上 text-align-last 就行了。

.m-label{
  width: 55px;
  min-width: 55px;
  margin-right: 10px;
  text-align-last: justify;
  text-align: justify;
}

二、transform:rotateY()翻转

1、问题背景：

　　rotate(angle) 定义 2D 旋转，在参数中规定角度。但是这个角度针对的基准点，容易引起问题，比如把一个元素翻转 180deg 的话，会有一点错位。

2、解决方案：

　　rotateX(angle) 定义沿着 X 轴的 3D 旋转。rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

　　以一个轴为基准线进行翻转，就不会产生一点错位的问题。

三、渐变文字

h1{
  background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

四、column count

　　使用列属性为文本元素制作漂亮的列布局。

p{
  column-count: 3;
  column-gap: 5rem;          
  column-rule: 1px solid salmon; /* border between columns */
}

五、平滑滚动

html {
  scroll-behavior: smooth;
}

六、placeholder 伪元素、selection 伪类

// 使用 placeholder 伪元素来改变 placeholder 样式：
input::placeholder{
  font-size:1.5em;
  letter-spacing:2px;
  color:green;
  text-shadow:1px 1px 1px black;
}

// selection 伪类设置选中元素的样式
::selection{
  color:coral;
}

// decimal leading zero 将列表样式类型设置为十进制前导零
li{
  list-style-type:decimal-leading-zero;
}

1、caret-color 属性用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

2、CSS伪类 :only-child 匹配没有任何兄弟元素的元素。等效的选择器还可以写成 :first-child:last-child 或者 :nth-child(1):nth-last-child(1) ,当然,前者的权重会低一点.

3、CSS 属性 list-style-type 可以设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）

li{
  list-style-type:'🟧';
}