html 空心字 以及部分艺术字

news/2024/11/17 16:09:20/

前几天做demo 的时候,遇到了一个需求,就是写一个空心字。想了半天没招,就弄了 网上的资源。

现在想想,加上查资料,感觉还是能实现的

空心字主要使用了 css3 的  text-shadow

效果大概是这样的

上代码:

 

<style>
.font > p{font-size: 40px;text-shadow: 0 0 2px black; // 使用了 字体阴影,然后把字体颜色调成背景颜色,就是空心字了color: white;
}
</style>
// 这里用到了一些很有意思的标签,有些是以前就知道的,有些是刚知道的,看上面的效果
<div class="font"><p><i>i你猜</i><br> // 斜体<span>span猜不猜</span><br> // 这个就不需要介绍了<strong>strong不猜</strong><br> // 重要文本,也是粗体,和 b 标签的区别可以去查一查<b>b猜</b><br> // 粗体<u>u猜</u><br> // 下划线<big>big猜</big><br> // 大号字体<small>small猜</small><br> // 小号字体<strike>strike猜</strike> // 删除线</p>
</div>

 

 

.font2 > p {font-size: 40px;text-shadow: 5px 5px 5px black;color: red;
}
<div class="font2"><p><i>艺术字</i></p>
</div>

 

 

没想到吧,还能有空心的 艺术字

 

.font3 > p {font-size: 40px;text-shadow: 5px 5px 5px black, 0px 0px 2px black; // 没错这里设置了两个 shadowcolor: white;
}
<div class="font3"><p><i>艺术字</i></p>
</div>

 

 

 

这个已经基本上接近 办公软件的 艺术字了吧

 

.font4 > p {font-size: 40px;text-shadow: 5px 5px 5px black, 0px 0px 2px red, 2px 2px 3px green;
}
<div class="font4"><p><i>艺术字</i></p>
</div>

 

还有很多有趣的组合,那些标签也可以一个套一个,可以玩很久的样子。(*^▽^*)

 

 


http://www.ppmy.cn/news/526915.html

相关文章

android 字体空心,Android空心圆及层叠效果实现代码

搜索热词 本文实例为大家分享了Android空心圆及层叠效果的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下 package com.bwei.test.zidingyiview2; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.…

html中文字空心如何设置,css 中字体文本小诀窍

本篇介绍 css 几种文本修饰的案例。 1、现实中的文字效果 1.1 凸版印刷效果 背景知识&#xff1a;text-shadow 凸版印刷需要考虑两种情况&#xff1a;浅底深色字和深色浅底字 浅底深色字代码示例 凸版印刷效果之下投影&#xff1a;浅底深色字要下投影 .letterpress-down { back…

cmake常用命令解析

关键字 project可以⽤来指定⼯程的名字和⽀持的语⾔&#xff0c;默认⽀持所有语⾔。eg. project(HELLO)&#xff0c;project(HELLO CXX)set⽤来显式指定变量&#xff0c;eg. set(SRC_LIST main.cpp)message向终端输出用户自定义的信息&#xff0c;主要包含三种信息&#xff1a…

跨 OT 部门管理来自新兴技术的网络风险挑战

本文首发微信公众号网络研究院&#xff0c;关注获取更多。 随着 AI 和自动化工具被引入企业&#xff0c;解决这些新技术&#xff08;包括 OT 环境中的生成 AI&#xff09;带来的网络风险需要一种综合方法。 这些新兴技术进步可以在 OT&#xff08;运营技术&#xff09;基础设…

一句话说清帧同步(附服务器Golang关键代码,客户端JS关键代码)。

任何对帧同步有疑问的人&#xff0c;都应该来看这篇文章&#xff0c;这是参考了2个帧同步模型&#xff0c;遇到各种问题并一一解决之后&#xff0c;彻底明白帧同步讲的是什么玩意的一篇文章。断断续续修改了将近2个月&#xff0c;说多了都是泪:(。 言归简短&#xff0c;书归正…

Roguelike到底是啥?讲讲和Roguelike 相关知识(搬运)

&#xff08;搬运自 http://m.sohu.com/a/126992200_483399&#xff09; &#xff08;个人觉得可以从Rogue - 一切的开始这里开始往下看_(:з」∠)_&#xff09; &#xff08;这篇文章虽然很长&#xff0c;但的确是篇好文章&#xff0c;它里面不仅科普了一些知识&#xff0c;…

秦皇岛 2019 CCPC区域赛 部分代码

Decimal Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total Submission(s): 2010 Accepted Submission(s): 894 Problem Description 给定一个正整数 n&#xff0c;要求判断 1n 在十进制下是不是一个无限小数。如果是&#xff0c;输出…

python著作_Python 常用库和著作介绍 ---全能与潮流

2017年最新IEEE世界编程语言排行榜公布&#xff0c;Python高居榜首。 在此之前&#xff0c;Python被广泛应用在web开发、系统运维、数据爬虫、数据分析和游戏服务器开发等,随着人工智能的浪潮&#xff0c;Python以其独特的语法特性和丰富的第三方类库成为了机器学习算法编程的优…