CSS 3 制作非主流文字——让文字更美少量

  • 时间:2018-12-30 23:26 作者:小白前端 来源:小白前端 阅读:180
  • 扫一扫,手机访问
摘要:上篇CSS3文章复习:CSS3 新特性 ——border 边框属性有童靴们反应CSS3基础比较容易学习,但难在运用。那小编就把课程略微调整一下,在运用中教大家轻松学习CSS3。text-shadow 文本阴影text-shadow 可以给文本设置阴影。它的语法如下:text-shadow:h-sha

上篇CSS3文章复习:CSS3 新特性 ——border 边框属性

有童靴们反应CSS3基础比较容易学习,但难在运用。那小编就把课程略微调整一下,在运用中教大家轻松学习CSS3。

text-shadow 文本阴影

text-shadow 可以给文本设置阴影。它的语法如下:

text-shadow:h-shadow v-shadow blur color;

它的四个参数分别代表水平阴影(必填)、垂直阴影(必填)、模糊距离(选填)、阴影颜色(选填)。

我们来看个例子:

小白前台

给上面的文字加少量阴影效果:

CSS 3 制作非主流文字——让文字更美少量

浏览器中查看:

CSS 3 制作非主流文字——让文字更美少量

额...这种粗糙的阴影一定是不好看的啦~

假如我们想要看起来带点模糊效果的文字,可以去掉它的阴影颜色,并且把水平阴影和垂直阴影设置为0。如下:

text-shadow: 0px 0px 10px;

浏览器中查看:

CSS 3 制作非主流文字——让文字更美少量

不过这个模糊是给阴影的,文字本身不会受影响。那怎样才能做出来模糊的文字呢?试想,假如我们把文字变透明,只留下有模糊效果的阴影文字不就完美了!text-fill-color属性是给文字设置填充色的,我们给它的属性设置为透明:

CSS 3 制作非主流文字——让文字更美少量

浏览器中查看:

CSS 3 制作非主流文字——让文字更美少量

这次你的眼前一片模糊了......

假如你想要制作镂空的文字,需要配合使用文字描边属性——text-stroke(目前只有webkit内核支持。童靴们谨慎使用~),而后把你的文字颜色设置成透明。

CSS 3 制作非主流文字——让文字更美少量

浏览器中查看:

CSS 3 制作非主流文字——让文字更美少量

当然了,我们可以制作文字渐变效果。但是文字没有渐变的属性,那我们怎样才能实现文字渐变呢?

由于背景色是可以做渐变的,我们把文字本身的颜色设置为透明,而后在使用背景渐变不就阔以了哈哈

CSS 3 制作非主流文字——让文字更美少量

在浏览器中查看:

CSS 3 制作非主流文字——让文字更美少量

假如你是一个爱学习的孩子,那就关注小白前台,好文章随时推荐给您。你必需非常努力,才能看起来毫不费力!

CSS 3 制作非主流文字——让文字更美少量

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】树莓派安装TensorFlow(2020-04-24 21:11)
【系统环境|服务器应用】防面试-SD_WebImage(2020-04-24 21:11)
【系统环境|服务器应用】推荐一款视频控件xgplayer(2020-04-24 21:11)
【系统环境|服务器应用】PostgreSQL 源码解读(27)- 查询语句#12(查询优化-上拉子链接#2)(2020-04-24 21:11)
【系统环境|服务器应用】如何轻松学习JavaScript?(2020-04-24 21:10)
【系统环境|服务器应用】【源码剖析】Launcher 8.0 源码 (12) --- Launcher 启动流程 第五步之计算桌面各布局细节参数(2020-04-24 21:10)
【系统环境|服务器应用】前台碰撞室之console.log与文本字符(2020-04-24 21:10)
【系统环境|服务器应用】好用的Middleware实现(2020-04-24 21:10)
【系统环境|服务器应用】前台面试每日 3+1 —— 第373天(2020-04-24 21:10)
【系统环境|服务器应用】绍圣--kafka之生产者(五)(2020-04-24 21:10)
手机二维码手机访问领取大礼包
返回顶部