text-stroke案例应用:
实现效果更好的外描边效果,设置两层文字,下层的文字有描边,上层的文字没有描边,示例如下:
<div class="text-stroke-out" data-content="stroke">stroke</div>
.text-stroke-out{
font-size: 32px;
-webkit-text-stroke: 2px deepskyblue;
letter-spacing: 1px;
}
[data-content]::before{
content: attr(data-content);
position: absolute;
-webkit-text-stroke: 0;
color: #fff;
}
text-fill-color案例应用
实现简单的一键换肤效果,让所有颜色都继承祖先元素的color色值,在想要换肤的时候,只要容器元素改变color属性值就可以了
<section class="module">
<h4>模块标题</h4>
<div class="content">
<ul>
<li>文字描述</li>
<li>文字描述</li>
<li>文字描述</li>
</ul>
<button>了解更多</button>
</div>
</section>
<section class="module" data-theme="a">
<h4>模块标题</h4>
<div class="content">
<ul>
<li>文字描述</li>
<li>文字描述</li>
<li>文字描述</li>
</ul>
<button>了解更多</button>
</div>
</section>
.module{
border: 1px solid;
}
.module h4{
margin: 0;
padding: 5px 10px;
-webkit-text-fill-color: #fff;
background-color: currentColor;
}
.module button{
border: 0;
width: 100px;
height: 32px;
-webkit-text-fill-color: #fff;
color: inherit;
background-color: currentColor;
margin-top: 10px;
}
.module .content{
padding: 10px;
}
.module ul{
color: currentColor;
}
[data-theme='a'] {
color: deepskyblue;
}
文字渐变
<!--文字填充渐变效果-->
<div class="text-fill-gradient">文字渐变效果</div>
.text-fill-gradient{
font-size: 32px;
-webkit-text-fill-color: transparent;
background: linear-gradient(to right, deepskyblue,deeppink,skyblue);
-webkit-background-clip: text;
}