by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12180
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、温故知新：光标颜色

2018年的时候，分享过CSS改变光标颜色的caret-color属性，详见“CSS改变光标颜色caret-color简介及其它变色方法”一文。

现在，除了光标的颜色，光标的形状也能改变了，这个CSS属性就是caret-shape属性。

caret-shape: auto;
caret-shape: bar;
caret-shape: block;
caret-shape: underscore;

二、caret-shape效果一览

属性值bar的效果就是目前我们常见的效果，一根1像素的竖条条像小星星一样闪啊闪的。

这个不不放图。

block的光标效果是一个方块闪啊闪的，效果如下GIF动图：

当我们输入的字符会覆盖下一个字符的时候，就适合使用caret-shape:block块状光标。

underscore是下划线光标效果。GIF录屏效果参见：

当我们需要模仿打字机或下划线文本输入样式效果的时候，那就可以使用caret-shape:underscore下划线插入符号光标。

三、caret-animation属性是？

与caret-shape属性同时出现的还有个CSS属性，名为caret-animation，用来控制光标闪烁与否的。

语法如下：

/* 动感光波，闪闪闪 */
caret-animation: auto;
/* 糟了，中了定身咒 */
caret-animation: manual;

当我们希望自定义光标闪烁效果的时候，就可以用到caret-animation:manual，例如下面这个案例，七色光标变色闪烁效果。

<input placeholder="focus me" class="custom-caret" />

CSS代码如下：

@keyframes custom-blink {
  0%, 50% { caret-color: transparent; }
  50%, 100% { caret-color: hsl(calc(3.6 * var(--seed)), 100%, 50%); }
}

@property --seed {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

@keyframes seed {
  from { --seed: 0; }
  to { --seed: 100; }
}

.custom-caret {
  caret-animation: manual; /* 关闭默认的光标闪烁 */
  caret-color: blue;
  animation: custom-blink 1.5s infinite step-end, seed calc(1.5s * 7) both infinite linear;
}

眼见为实，您可以狠狠地点击这里：CSS自定义caret光标七色动画demo

由于光标比较细，其实效果没那么明显，如下GIF动图。

四、caret缩写属性

caret-color、caret-animation和caret-shape可以缩写为caret属性。

caret: red;
caret: block;
caret: manual;

/* 两个值 */
caret: red manual;
caret: block auto;
caret: underscore orange;

/* 三个值 */
caret: bar manual red; 
caret: block auto #00ff00;

由于三个属性的值类型都不一样，所以缩写属性数量任意，顺序也没有什么要求，一眼就看出什么意思。

不过日常开发不建议缩写，因为兼容性不一致。

caret-color很早就支持，但是你如果使用caret缩写属性设置光标颜色，本来支持的浏览器反而不支持。

所以，caret属性大家暂时先了解了解就可以了。

五、兼容性and结语么么😘

兼容性么，咳咳，暂时仅Chrome浏览器支持，还在这是个渐进增强特性，浏览器不支持，也就是默认效果，不影响在实际开发中的使用。

结语了，该说些什么呢。

现在年纪上去了，没有多少分享欲了。

算了，不扯淡了，就这样吧。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12180

（本篇完）