text-stroke，text-fill-color等文字属性应用案例

最新推荐文章于 2024-08-30 17:03:57 发布

猫大喵

最新推荐文章于 2024-08-30 17:03:57 发布

阅读量227

点赞数

本文链接：https://blog.csdn.net/weixin_43867303/article/details/129165068

版权

css 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

文章介绍了如何使用CSS的text-stroke属性创建外描边效果，通过设置两层文字实现更佳的显示。同时，利用text-fill-color属性实现一键换肤功能，使元素颜色能继承祖先元素的color属性，便于整体风格的切换。此外，还展示了文字填充渐变的技巧，为文本添加动态视觉效果。

摘要由CSDN通过智能技术生成

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;
}