纯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 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
html5 标签
Jul 16 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 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
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
再探JavaScript作用域
2014/09/24 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
python监控键盘输入实例代码
2018/02/09 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
Python实现Dijkstra算法
2018/10/17 Python
python如何查看微信消息撤回
2018/11/27 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
个人实用的自我评价范文
2013/11/23 职场文书
建议书的格式
2014/05/12 职场文书
户外宣传策划方案
2014/05/25 职场文书
团委工作总结2015
2015/04/02 职场文书
box-shadow单边阴影的实现
2023/05/21 HTML / CSS