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实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 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
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
Python 文件重命名工具代码
2009/07/26 Python
python连接mysql并提交mysql事务示例
2014/03/05 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
python dict乱码如何解决
2020/06/07 Python
高中军训感言800字
2014/03/05 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
户外活动总结范文
2014/04/30 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
同学会演讲稿
2019/04/02 职场文书