编程教育资源分享平台

网站首页 > 后端开发 正文

每天学点CSS3专题:CSS3新增的文本样式实现字体模糊效果

luoriw 2024-02-01 14:29:13 后端开发 16 ℃ 0 评论

在昨天我们知道了什么是rgba后,今天我们就来继续学习css自带的文字阴影样式来制作字体模糊效果。在此之前我们先学习下文字阴影样式text-shadow.

学习text-shadow属性的使用

text-shadow属性介绍

  • text-shadow:x y blur color, …

  • 参数 x横向偏移 y纵向偏移 blur模糊距离 color阴影颜色

简单用法

text-shadow:2px 2px 4px black

实战练习

html代码片段

<div class="box">每天学习一点点</div>

css样式

.box{

width:50%;

height:200px;

margin: 50px auto;

color:rgba(0,0,0,1);

/*为了看的更清楚设置一秒的动画效果*/

transition: 1s;

font:100px/200px "微软雅黑";

text-align:center;

}

.box:hover{

color:rgba(0,0,0,0);

/*设置文字阴影*/

text-shadow: 0px 0px 100px rgba(0,0,0,0.5);;

}

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言