分享一些好用的css属性

一：光标显示

1：场景：

        我们会发现当你在页面鼠标点击文字等，会显示出如下光标。

       2：css属性

             

   caret-color：red;光标为红色

   caret-color: transparent;不显示光标

   caret-color: auto;

更多请参考：caret-color - CSS（层叠样式表） | MDN (mozilla.org)

二：文字设置

1：设置文字对齐方式。

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

2：设置文字超出隐藏。

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

3：设置行高/文字粗细

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

4:设置字间距/首行缩进

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

5：文字贯穿，添加上、中、下划线

Line-through（中划线）
text-decoration: line-through

Underline（下划线）
text-decoration: underline

Overline（上划线）
text-decoration: overline

 

三：鼠标移入效果

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

四：颜色渐变

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

 五：元素遮挡

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

更多请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events