纯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实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
Canvas如何做个雪花屏版404的实现
Sep 25 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
杏林同学录(六)
2006/10/09 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
Js 中debug方式
2010/02/07 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
Python标准库defaultdict模块使用示例
2015/04/28 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
python字典的遍历3种方法详解
2019/08/10 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
flask实现验证码并验证功能
2019/12/05 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
致长跑运动员广播稿
2014/01/31 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
师范生见习报告
2014/10/31 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js