纯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实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 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 VS ASP
2006/10/09 PHP
PHP中的类-什么叫类
2006/11/20 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
javascript 动态添加表格行
2006/06/22 Javascript
Javascript开发包大全整理
2006/12/22 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
Angular弹出模态框的两种方式
2017/10/19 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
详解python tkinter模块安装过程
2020/01/06 Python
python利用线程实现多任务
2020/09/18 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
市场营销专业推荐信
2013/11/03 职场文书
股东协议书范本
2014/04/14 职场文书
应届大学生求职信
2014/07/20 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
幼儿园见习报告
2014/10/30 职场文书
先进学校事迹材料
2014/12/30 职场文书
李强优秀员工观后感
2015/06/16 职场文书
大学生支教感言
2015/08/01 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL