纯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编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
CSS 伪元素::marker详解
Jun 26 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
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
php实现留言板功能
2017/03/05 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
javascript常见操作汇总
2014/09/03 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
初步讲解Python中的元组概念
2015/05/21 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
python正则中最短匹配实现代码
2018/01/16 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python各层级目录下import方法代码实例
2020/01/20 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
学生安全责任协议书
2016/03/22 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS