CSS 07 文字处理
制作发光字、立体字、苹果字体 text-shadow: h-shadow v-shadow blur color;
CSS 07 文字处理插图
Pandar
<div class="font2">
APPLE STYLE
</div>
<div class="font3">
3D TEXT EFFECT
</div>.body{
background-color:#666;
text-align:center;
font:bild 55px "Microsoft YaHei";} .font1{
color:#fff;
text-shadow:0px 0px 20px red;} .font2{
color:#000;
text-shadow:0px 1px 1px #fff;} .font3{
color:#fff;
text-shadow:1px 1px rgba(197,223,248,0.8),
2px 2px rgba(197,223,248,0.8),
3px 3px rgba(197,223,248,0.8),
4px 4px rgba(197,223,248,0.8),
5px 5px rgba(197,223,248,0.8),
6px 6px rgba(197,223,248,0.8);} 用text-overflow解决文字排版 当文本超过一定的范围变为 ...
text-overflow: clip ellipsis string
常用ellipsis
稳字当头稳中求进 全力以赴实现“平安高考”,2022年全国普通高校招生考试安全工作电视电话会议召开。
稳字当头稳中求进 全力以赴实现“平安高考”,2022年全国普通高校招生考试安全工作电视电话会议召开。
.demo{
margin:30px auto;
width:100px;
padding:10px;
border:1px solid #ccc;
height:50px;
text-overflow:clip;
overflow:hidden;} .demo1{
margin:0px auto;
width:100px;
padding:10px;
border:1px solid #ccc;
text-overflow:ellisis;
overflow:hidden; //搭配使用，才能出现效果
white-space:nowrap; //强制不换行，搭配使用} 新的字体单位：rem px:像素
em: 父级的字体的缩放，跟终端有关
rem:更具根的单位进行换算
Hello world
Hello world
html{
font-size:10px; //定义根单位
font-size:62.5%; //这个定义会更加常用} body{
font-size:1.4rem; // 10*1.4=14px}
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023 年 01 月，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录