纯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 相关文章推荐
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 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
多人战的战术与战略
2020/03/04 星际争霸
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
在Python的循环体中使用else语句的方法
2015/03/30 Python
破解安装Pycharm的方法
2018/10/19 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
高级Java程序员面试要点
2013/08/02 面试题
美容院经理岗位职责
2014/04/03 职场文书
岗位说明书怎么写
2014/07/30 职场文书
租房协议书样本
2014/08/20 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
Python Socket编程详解
2021/04/25 Python