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
（本篇完）