纯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制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 HTML / CSS
CSS的calc函数用法小结
Jun 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
Syphon 使用方法
2021/03/03 冲泡冲煮
PHP闭包函数详解
2016/02/13 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
Array.prototype 的泛型应用分析
2010/04/30 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
Python内置模块turtle绘图详解
2017/12/09 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
利用python 下载bilibili视频
2020/11/13 Python
团支书的期末学习总结自我评价
2013/11/01 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
六一儿童节主持词
2014/03/21 职场文书
大学新生军训方案
2014/05/03 职场文书
婚礼秀策划方案
2014/05/19 职场文书
物业品质提升方案
2014/06/08 职场文书
领导干部保密承诺书
2014/08/30 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
外贸英文求职信范文
2015/03/19 职场文书
酒桌上的开场白
2015/06/01 职场文书
电力安全学习心得体会
2016/01/18 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
Python获取字典中某个key的value
2022/04/13 Python