分享一些好用的css属性

Posted 2023-02-22 五花肉三七分

一：光标显示

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;//首行缩进

三：鼠标移入效果

鼠标移入禁用效果：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