让CSS3给你的文字加上边框宽度，并实现镂空效果
2024-10-19 01:30:24
这次，我主要向大家介绍一下CSS3下的-webkit-text-stroke属性，并分享几个用该属性制作的镂空文字效果。
1、-webkit-text-stroke属性简介
CSS边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用color: transparent属性，你还可以创建镂空的字体。
2、一起看几个利用-webkit-text-stroke制作的文字特效
第一个CSS代码如下：
- h1.demo {
- text-transform: uppercase;
- font-size: 48px;
- margin: 0 0 30px 0;
- -webkit-text-stroke: 1px black;
- color: white;
- text-shadow:
- 3px 3px 0 #000,
- -1px -1px 0 #000,
- 1px -1px 0 #000,
- -1px 1px 0 #000,
- 1px 1px 0 #000;
- }
复制代码
[backcolor=white !important]显示效果：
<ignore_js_op> [backcolor=white !important]
第二个CSS代码如下：
- h2.demo {
- font-size: 48px;
- margin: 0 0 30px 0;
- color: white;
- text-shadow:
- -3px -3px 0 #000,
- 1px -3px 0 #000,
- -3px 3px 0 #000,
- 3px 3px 0 #000;
- }
复制代码
显示效果：
<ignore_js_op>
第三个CSS代码如下，注意这个demo需要用基于webkit内核的chrome或者safari浏览器才能看，firefox上无效
- h3.demo {
- font-size: 48px;
- -webkit-text-stroke: 2px red;
- -webkit-text-fill-color: white;
- color: white;
- -webkit-animation: colorchange 1s infinite;
- -webkit-animation-direction: alternate;
- }
- @-webkit-keyframes colorchange {
- 0% {
- -webkit-text-stroke: 10px red;
- letter-spacing: 0;
- }
- 100% {
- -webkit-text-stroke: 20px green;
- letter-spacing: 18px;
- }
- }
复制代码
[backcolor=white !important][backcolor=white !important]
显示效果：
<ignore_js_op>
好了，以上就是-webkit-text-stroke的用法以及3个相关的在线例子，这个文字特效就介绍到这里了，谢谢阅读！
转载请自觉注明原文：http://www.itivy.com/html5/archive/2012/1/11/css3-webkit-text-stroke-demo.html
最新文章
- ACM/ICPC 之 四道MST-Prim解法(POJ1258-POJ1751-POJ2349-POJ3026)
- JavaScript获取当前根目录
- HDU4758 Walk Through Squares（AC自动机+状压DP）
- 疯狂位图之——位图生成12GB无重复随机乱序大整数集
- cf_ducational Codeforces Round 16_D（gcd）
- [TYVJ] P1023 奶牛的锻炼
- 火狐解决OCSP回应包含过期信息的问题
- 权限管理系统 mysql 数据脚本
- 【面试笔试算法】Problem 8: 然而沼跃鱼早就看穿了一切（hiho题库）
- Appcan开发笔记:导出Excel文件
- 【cf842D】Vitya and Strange Lesson（01字典树）
- ASP.NET MVC - 发布web应用程序、部署到IIS
- 201621123075 week5 继承、多态、抽象类和接口
- 使用POI读取xlsx文件，包含对excel中自定义时间格式的处理
- 移动端web页面开发常用的头部标签设置
- xml文件中[Invalid byte 1 of 1-byte UTF-8 sequence.]的解决方案
- Bootstrap Table 超多列 使用滚动条
- Linux centos6.5 系统语言改成中文简体
- 20155204 2016-2017-2 《Java程序设计》第8周学习总结
- Unity UI大小动态设置(Resize Unity UI RectTransform)