纯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动画的回调处理
Jul 21 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
在CSS中使用when/else的方法
Jan 18 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
我的php学习笔记(毕业设计)
2012/02/21 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
js select option对象小结
2013/12/20 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
Python实现京东秒杀功能代码
2019/05/16 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
软件测试面试题
2015/10/21 面试题
介绍一下XMLHttpRequest对象
2012/02/12 面试题
实习教师自我鉴定
2013/12/09 职场文书
办公室经理岗位职责
2014/01/01 职场文书
高中学生期末评语
2014/04/25 职场文书
宣传委员竞选稿
2015/11/19 职场文书
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android