简单掌握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 相关文章推荐
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 HTML / CSS
HTML中link标签属性的具体用法
May 07 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
popdiv
2006/07/14 Javascript
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
javascript 数组学习资料收集
2010/04/11 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python list操作用法总结
2015/11/10 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
网上签名寄语活动留言
2014/01/18 职场文书
应届生自荐信范文
2014/02/21 职场文书
交警失职检讨书
2015/01/26 职场文书
酒店员工管理制度
2015/08/05 职场文书
2016年春节问候语
2015/11/11 职场文书
诚信高考倡议书
2019/06/24 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js
MySQL批量更新不同表中的数据
2022/05/11 MySQL
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers
postgresql中如何执行sql文件
2023/05/08 PostgreSQL