Share some useful css properties

One: cursor display

1: Scene:

        We will find that when you click the text on the page with the mouse, the following cursor will be displayed.

 

       2: css attribute

             

   caret-color：red;光标为红色

   caret-color: transparent;不显示光标

   caret-color: auto;

Read more: caret-color - CSS (Cascading Style Sheets) | MDN (mozilla.org)

Two: text setting

1: Set text alignment.

h1 {text-align:center;}//居中
h2 {text-align:left;}//左对齐
h3 {text-align:right;}//右对齐
h4 {text-align:justify;}//两端对齐

2: Set text beyond hidden.

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

3: Set line height/text thickness

font-weight: 600/700/800/900;//文字粗细
line-height: 60px;//行高；当行高等于所在容器高度，文本垂直方向居中

4: Set the word spacing/indentation of the first line

letter-spacing:1px;//字间距
text-indent:1em;//首行缩进

Three: mouse move in effect

鼠标移入禁用效果：cursor：no-allowed
  鼠标移入变小手： cursor: pointer;

Four: color gradient

#grad {
  background-image: linear-gradient('top',red, 30%, yellow, 0.3);
}
'top':渐变方向（也可以为数字:45deg）
30%:上一个颜色从1到0的渐变范围
0.3：透明度

 Five: Elemental occlusion

CSS - 元素遮挡（层级/定位等等）导致无法点击下层元素解决方案:pointer-event:none
当使用定位后，你要操作最下层div，由于最上面的div遮挡了最下层div导致你无法操作最下层div，可以使用此属性

For more information, please refer to: https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events