提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

CSS 07 文字处理

2023-03-07 09:11:04 时间

制作发光字、立体字、苹果字体 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

}

相关文章