纯CSS3代码实现文字描边


Posted in HTML / CSS onApril 25, 2016

CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果。例:

CSS Code复制内容到剪贴板
  1. text-shadow:10px 5px 2px #f60/*text-shadow:x位移 y位移 模糊程度 颜色 */   

其中:x位移和y位移表示阴影相对文字的偏移值,可以为负值。思路其实很简单:对四个方向都作出模糊程度为零的1px阴影

CSS Code复制内容到剪贴板
  1. -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,   
  2. #000 -1px 0 0,#000 0 -1px 0; -   
  3. moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;    
  4. text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;    
  5. *filter: Glow(Color=#000, Strength=1);   
  6.  /*针对各主流浏览器做了适配的写法*/   

原则上,text-shadow支持了多方向阴影的写法,不过代价是代码偏多!

HTML / CSS 相关文章推荐
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 #HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 #HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 #HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 #HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 #HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 #HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 #HTML / CSS
You might like
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
php批量删除操作代码分享
2017/02/26 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
JScript中的"this"关键字使用方式补充材料
2007/03/08 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
js实现点击烟花特效
2020/10/14 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
在Python中使用HTML模版的教程
2015/04/29 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python递归法解决棋盘分割问题
2019/07/17 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
python遍历路径破解表单的示例
2020/11/21 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
Linux的文件类型
2012/03/07 面试题
编辑硕士自荐信范文
2013/11/27 职场文书
工会积极分子个人总结
2015/03/03 职场文书
统计员岗位职责范本
2015/04/14 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
消防安全月活动总结
2015/05/08 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS