简单掌握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 相关文章推荐
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 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图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
在Python中使用正则表达式的方法
2015/08/13 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
实例讲解python中的序列化知识点
2018/10/08 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
哪些是python中web开发框架
2020/06/17 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
会计大学生职业生涯规划书范文
2014/01/13 职场文书
个人简历自我评价
2014/02/02 职场文书
售后客服个人自我评价
2014/09/14 职场文书
毕业生对母校寄语
2015/02/26 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python