纯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的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 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
dedecms模板标签代码官方参考
2007/03/17 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
jquery foreach使用示例
2013/09/12 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
JavaScript SHA512&SHA256加密算法详解
2015/08/11 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
Python json模块使用实例
2015/04/11 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
详解python配置虚拟环境
2019/04/08 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
python 实现目录复制的三种小结
2019/12/04 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
python 录制系统声音的示例
2020/12/21 Python
英国钻石公司:British Diamond Company
2020/02/16 全球购物
活动总结报告范文
2014/05/04 职场文书
水电站项目建议书
2014/05/12 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
小学教师教学反思
2016/02/24 职场文书