纯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 相关文章推荐
你应该知道的30个css选择器
Mar 19 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 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
简单的PHP多图上传小程序代码
2011/07/17 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
PHP计数器的实现代码
2013/06/08 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
js的一些常用方法小结
2011/06/29 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
浅谈Sticky组件的改进实现
2016/03/22 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
Python中分数的相关使用教程
2015/03/30 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python和php哪个容易学
2020/06/19 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
金融专业毕业生推荐信
2013/11/26 职场文书
快递业务员岗位职责
2014/01/06 职场文书
出国考察邀请函
2014/01/21 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
解除租房协议书
2014/12/03 职场文书
蓬莱阁导游词
2015/02/04 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js