纯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色彩
Jan 16 HTML / CSS
CSS3 选择器 属性选择器介绍
Jan 21 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 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
How do I change MySQL timezone?
2008/03/26 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
js实现九宫格抽奖
2020/03/19 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
python判断设备是否联网的方法
2018/06/29 Python
python对csv文件追加写入列的方法
2019/08/01 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
劳动实践课感言
2014/02/01 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
2015年技术员工作总结
2015/04/10 职场文书
学校计划生育责任书
2015/05/09 职场文书
企业年会祝酒词
2015/08/11 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书