css实现空心文字效果

在日常开发中大家很有可能会遇到需要手动实现空心文字效果

实现方式一（空心字体）

<style>
.text{-webkit-text-stroke: 1px black; // 根据需求不同改变颜色-webkit-text-fill-color : transparent;font-size: 30px;color:#fff;
}
</style>
<div class="text">空心字/缕空效果</div>
</body>

除了使用-webkit-text-stroke和-webkit-text-fill-color以外，我们还可以利用text-shadow。

<style>
.text{text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;font-size: 30px;color:#fff; // 根据需求不同改变颜色
}
</style>
<div class="text">空心字/缕空效果</div>

实现方式二（立体空心发光字体）

<style>
.light{font-size: 30px;color: #fff;text-shadow: 0 0 5px #10f701, 0 0 10px #727272;
}
</style>
<div class="light">空心发光文字效果</div>

实现方式三（彩色渐变文字）

<style>
.color-text{font-size: 30px;background: linear-gradient(to right, red, blue);-webkit-background-clip: text;color: transparent;
}
</style>
<span class="color-text">彩色渐变文字效果</span>

css实现空心文字效果相关推荐

jQuery和CSS制作霓虹灯文字效果
原文:jQuery和CSS制作霓虹灯文字效果源代码下载地址:http://www.zuidaima.com/share/1607121521200128.htm
html鼠标悬停效果_【开发小技巧】023—如何使用HTML和CSS实现3D文字效果
来源 | https://www.geeksforgeeks.org/create-a-3d-text-effect-using-html-and-css/3D文字效果是网页设计领域中最常用的文字效果 ...
纯CSS实现的文字效果还可以这么酷炫
大家好,我是前端实验室的大师兄! 前言 CSS是一门很特殊的语言,你认为CSS只能用来控制网页的结构与样式,但只要你有丰富的想象力,就能创造无限可能. 本文中大师兄为你精选了5个使用纯CSS实现的文字 ...
纯CSS实现的文字效果
大家好,我是前端实验室的大师兄! 前言 CSS是一门很特殊的语言,你认为CSS只能用来控制网页的结构与样式,但只要你有丰富的想象力,就能创造无限可能. 本文中大师兄为你精选了10个使用纯CSS实现的文 ...
记录-css实现交融文字效果
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 CSS是有魔法的,我们今天来实现一个CSS的动画效果,只需要几行代码就可以搞定. 第一步.我们要将一行文字从中间展开 <!DOCTY ...
css 光影掠过文字效果
光影:通过渐变背景图产生文字上有光影:background-clip:text;属性效果图: 文字上白色的光影是会移动的代码示例: html, body {width: 100%;height: ...
css实现立体投影文字效果
非常立体的字,偶然在某个系统看到的,扒下来以备日后使用.原始页面上还有鼠标移动到某个字上就会有"点亮"的效果,不知道怎么实现的,我仔细查看了它的css代码以及事件,发现都没有.实在 ...
CSS ::selection 选中文字效果
::selection伪元素,用来定义用户鼠标已选择内容的样式测试代码: p::selection{ background: #45caaf; color: #fff; } p::-moz-sele ...
纯CSS3文字效果推荐
前端开发whqet,csdn,王海庆,whqet,前端开发专家之前曾经研究过几个纯css实现的文字效果,<CSS文字条纹阴影动画>和<响应式奶油立体字效果>等,今天我们来研究 ...

css实现空心文字效果

css实现空心文字效果相关推荐

最新文章

热门文章