简单掌握CSS3将文字描边及填充文字颜色的方法


Posted in HTML / CSS onMarch 07, 2016

text-stroke文字描边
语法:

CSS Code复制内容到剪贴板
  1. text-stroke:<text-stroke-width> <text-stroke-color>  

想象一个红色描边的文字:
代码

CSS Code复制内容到剪贴板
  1. text-stroke: 1px #f00;  

效果
简单掌握CSS3将文字描边及填充文字颜色的方法

text-stroke是符合属性,可以分拆为text-stroke-width和text-stroke-color两个属性

text-fill-color文字填充
语法:

CSS Code复制内容到剪贴板
  1. text-fill-color:<color>  

text-fill-color会覆盖color所定义的字体颜色:

CSS Code复制内容到剪贴板
  1. text-fill-color:#f00;   
  2. color:#000;  

效果
简单掌握CSS3将文字描边及填充文字颜色的方法

在webkit下你将看到红色的文字

HTML / CSS 相关文章推荐
css3 border-radius属性详解
Jul 05 HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 HTML / CSS
纯html+css实现Element loading效果
Aug 02 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 #HTML / CSS
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 #HTML / CSS
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 #HTML / CSS
纯CSS3实现3D旋转书本效果
Mar 21 #HTML / CSS
CSS3实现粒子旋转伸缩加载动画
Apr 22 #HTML / CSS
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 #HTML / CSS
CSS3弹性盒模型开发笔记(一)
Apr 26 #HTML / CSS
You might like
php调用mysql数据 dbclass类
2011/05/07 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
Python反射和内置方法重写操作详解
2018/08/27 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
大学生简历的个人自我评价
2013/12/04 职场文书
迎接领导欢迎词
2014/01/11 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
如何写求职信
2014/05/24 职场文书
教师个人考察材料
2014/12/16 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
浅谈MySQL函数
2021/10/05 MySQL
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
Pandas数据结构之Series的使用
2022/03/31 Python