纯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实现3D旋转书本效果
Mar 21 HTML / CSS
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
html5表单的required属性使用
Jul 07 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中显示格式化的用户输入
2006/10/09 PHP
php,ajax实现分页
2008/03/27 PHP
Gird事件机制初级读本
2007/03/10 Javascript
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
Python连接DB2数据库
2016/08/27 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
python3获取url文件大小示例代码
2019/09/18 Python
Python图片的横坐标汉字实例
2019/12/04 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
列车长先进事迹材料
2014/01/25 职场文书
公证委托书模板
2014/04/03 职场文书
小学语文教研活动总结
2014/07/01 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
店面出租协议书范本
2014/11/28 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
余世维讲座观后感
2015/06/11 职场文书
法律服务所工作总结
2015/08/10 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
Python机器学习之基础概述
2021/05/19 Python
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL