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打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 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计算上一个月的今天
2013/05/23 PHP
php实现简单文件下载的方法
2015/01/30 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
python3读取csv和xlsx文件的实例
2018/06/22 Python
python按照多个条件排序的方法
2019/02/08 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python 实现dict转json并保存文件
2019/12/05 Python
Python远程linux执行命令实现
2020/11/11 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
美元符号 $
2022/02/17 杂记