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

  • 时间:2018-12-30 23:26 作者:小白前端 来源:小白前端 阅读:1173
  • 扫一扫,手机访问
摘要:上篇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)
最新发布的资讯信息
【系统环境|】2FA验证器 验证码如何登录(2024-04-01 20:18)
【系统环境|】怎么做才能建设好外贸网站?(2023-12-20 10:05)
【系统环境|数据库】 潮玩宇宙游戏道具收集方法(2023-12-12 16:13)
【系统环境|】遥遥领先!青否数字人直播系统5.0发布,支持真人接管实时驱动!(2023-10-12 17:31)
【系统环境|服务器应用】克隆自己的数字人形象需要几步?(2023-09-20 17:13)
【系统环境|】Tiktok登录教程(2023-02-13 14:17)
【系统环境|】ZORRO佐罗软件安装教程及一键新机使用方法详细简介(2023-02-10 21:56)
【系统环境|】阿里云 centos 云盘扩容命令(2023-01-10 16:35)
【系统环境|】补单系统搭建补单源码搭建(2022-05-18 11:35)
【系统环境|服务器应用】高端显卡再度登上热搜,竟然是因为“断崖式”的降价(2022-04-12 19:47)
手机二维码手机访问领取大礼包
返回顶部