<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background: black; } body>div { font-size: 6em; /*形成空心部分⬇*/ text-shadow: 1px 0 #fff, 1px 1px #fff, 1px -1px #fff, 0 1px #fff, 0 -1px #fff, -1px 0 #fff, -1px 1px #fff, -1px -1px #fff; } </style> </head> <body> <div>空心文字效果</div> </body> </html>
CSS实现空心文字效果
2023-08-01
100
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
CSS实现空心文字效果
目录
相关文章
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性，以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
28
3
3
|
3月前
|
前端开发
|
1月前
|
Web App开发
前端开发
iOS开发
|
3月前
|
移动开发
前端开发
HTML5
css实现涂绘文字的效果
如何使用HTML5和CSS3创建一个简单的文字涂抹动画效果。通过设置一个相对定位的父级div包含文本，并在其上使用绝对定位的伪元素与之重叠，实现动画效果。关键在于控制伪元素的宽度从0%到100%的变化过程，同时利用`overflow: hidden`和`white-space: nowrap`确保文本按预期显示。光标效果则通过添加右边界来模拟。整体代码简洁明了，便于理解和实践。
36
1
1
|
3月前
|
前端开发
程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了，来制作属于我们程序员的浪漫吧！
78
0
0
|
3月前
|
前端开发
|
4月前
|
前端开发
|
4月前
|
前端开发
|
4月前
|
前端开发
JavaScript
|
5月前
|
前端开发
容器