简单掌握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的新特性
Sep 05 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 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
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
PHP生成plist数据的方法
2015/06/16 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
python+django加载静态网页模板解析
2017/12/12 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
艺术设计专业个人求职信范文
2013/12/11 职场文书
大学生军训广播稿
2014/01/24 职场文书
五四青年节的活动方案
2014/08/20 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
申报优秀教师材料
2014/12/16 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python