CSS美化半个字符的巧妙方法

2020-04-27 15:02:58易采站长站整理

    left:50%;   
    width: 50%;   
    content: attr(data-content); /* dynamic content for the pseudo element */  
    overflow:hidden;   
    pointer-events: none; /* so the base char is selectable by mouse */  
    color: #000; /* for demo purposes */  
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */  
}  

你会发现,我们的实现方法可以很灵活,现在表象上是有三个字重叠,我们可以让每个字都各占1/3,这样,我得到一个三色字。上面这些例子都是左右分色,其实我们也可以让它上下分色或上中下分色。

想起了电影《卧虎藏龙》了的一句话,“心有多大,江湖就有多大”,作为Web程序员也是如此,只有我们用于探索和创新,有很多任务我们都可以用更简单,更方便的方法完成。你有此同感吗?