CSS3中文字镂空、透明值、阴影效果设置示例小结


Posted in HTML / CSS onMarch 07, 2016

text-fill-color打造镂空文字:
代码

CSS Code复制内容到剪贴板
  1. -webkit-text-fill-color:transparent;   
  2. -webkit-text-stroke:1px #000;  

效果
CSS3中文字镂空、透明值、阴影效果设置示例小结

text-stroke-color透明值让文字更柔和:
代码

CSS Code复制内容到剪贴板
  1. background-image:-webkit-linear-gradient(#eee,#000);   
  2. -webkit-background-clip:text;   
  3. -webkit-text-fill-color:transparent;  

效果1
CSS3中文字镂空、透明值、阴影效果设置示例小结

代码

CSS Code复制内容到剪贴板
  1. background-image:-webkit-linear-gradient(#eee,#000);   
  2. -webkit-background-clip:text;   
  3. -webkit-text-fill-color:transparent;   
  4. -webkit-text-stroke:1px transparent;  

效果2
CSS3中文字镂空、透明值、阴影效果设置示例小结

对比你会发现效果2中的文字比效果1更柔和一点

text-shadow文字阴影
语法:

CSS Code复制内容到剪贴板
  1. box-reflect:none | [ <length>{2,3} && <color>? ][ , <length>{2,3} && <color>? ]*  

我们来实现一个有阴影的文本示例:
代码

CSS Code复制内容到剪贴板
  1. text-shadow:2px 2px 0 #000;  

效果
CSS3中文字镂空、透明值、阴影效果设置示例小结

 text-shadow有3个length参数,第1个表示水平偏移,第2个表示垂直偏移,第3个表示模糊(可选)
柔和一点的文字阴影:
代码

CSS Code复制内容到剪贴板
  1. text-shadow:1px 1px 5px #000;  

效果
CSS3中文字镂空、透明值、阴影效果设置示例小结

多重阴影:
代码

CSS Code复制内容到剪贴板
  1. text-shadow:1px 1px 5px #000;  

效果
CSS3中文字镂空、透明值、阴影效果设置示例小结

HTML / CSS 相关文章推荐
CSS3 特效范例整理
Aug 22 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 HTML / CSS
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 #HTML / CSS
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 #HTML / CSS
纯CSS3实现3D旋转书本效果
Mar 21 #HTML / CSS
CSS3实现粒子旋转伸缩加载动画
Apr 22 #HTML / CSS
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 #HTML / CSS
CSS3弹性盒模型开发笔记(一)
Apr 26 #HTML / CSS
CSS3弹性盒模型开发笔记(三)
Apr 26 #HTML / CSS
You might like
php简单提示框alert封装函数
2010/08/08 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
php猜单词游戏
2015/09/29 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
简单的python协同过滤程序实例代码
2018/01/31 Python
python3 下载网络图片代码实例
2019/08/27 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
SQL面试题
2013/04/30 面试题
初任培训自我鉴定
2013/10/07 职场文书
成本会计岗位职责
2015/02/03 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang