[分享]css元素只显示半部分颜色

CSS中有一种特殊的效果，叫做元素只显示半部分颜色。

这种效果可以使用CSS的background-clip属性来实现。

.element {
   background: linear-gradient(to right, #f00 50%, #fff 50%);
   /* 将元素的背景设置为从左到右的红白渐变，线性 */
   -webkit-background-clip: text;
   /* 指定在文本内容上方显示颜色 */
   -webkit-text-fill-color: transparent;
   /* 将文本颜色设置为透明，使其只显示半部分颜色 */
} 

在实现这个效果时需要注意，该属性只适用于在Webkit浏览器中。

除了线性渐变，我们还可以使用径向渐变和重复背景图片来实现这个效果。