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 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
CSS3弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 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
2006/10/09 PHP
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
封装一个PDO数据库操作类代码
2009/09/09 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
比较基础的php面试题及答案-编程题
2012/10/14 面试题
物流管理专业应届生求职信
2013/11/21 职场文书
委托证明的格式
2014/01/10 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
运动会开幕式主持词
2015/07/01 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书