纯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 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
CSS3教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
CSS3 box-sizing属性
Apr 17 HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
discuz Passport 通行证 整合笔记
2008/06/30 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
php 地区分类排序算法
2013/07/01 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
React实现todolist功能
2020/12/28 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
python标准库OS模块详解
2020/03/10 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
德国帽子专家:Hutshopping
2019/11/03 全球购物
生产部统计员岗位职责
2014/01/05 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
2014年创卫实施方案
2014/02/18 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
团干部培训班心得体会
2016/01/06 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle