CSS显示两种颜色中的一个字符

Question

是否可以在css中使用两种颜色中的单个字符？

我的意思是，例如字符“B”的第一上半为红色，蓝色

下半年

Answer 1

一个解决办法是：

HTML：

<span class="half" title="B">B</span> 

（看到你必须设定的属性值）

CSS：

.half { 
     font-size: 90px; 
     font-weight: bold; 
     position: relative; 
     color: blue; 
     line-height: 1em; 
    } 

    .half:before { 
     position:absolute; 
     content:''attr(title)''; 
     color: red; 
     height: .5em; 
     overflow: hidden; 
    } 

的问题是，每一个浏览器计算自己的供应商前缀的.5em值不同

Answer 2

h1 { 
    font-size: 72px; 
    background: -webkit-linear-gradient(red 49%, blue 50%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

填充。