css中给文字加框,让CSS3给你的文字加上边框宽度，并实现镂空效果

这次，我主要向大家介绍一下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]显示效果：

 [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;

}

复制代码

显示效果：

第三个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]

显示效果：

好了，以上就是-webkit-text-stroke的用法以及3个相关的在线例子，这个文字特效就介绍到这里了，谢谢阅读！

CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角

CSS3系列三(与背景边框相关样式 、变形处理、动画效果)

与背景相关的新增属性 大家都知道在HTML页面中,元素都是由以下几部分组成 使用background-clip来修改背景的显示范围,如果设定为border-box,则背景范围包含边框区域,如果设定为p ...

CSS3总结一：border(边框)

Border-CSS1的属性 Border-CSS1:border Border-CSS1:border-style Border-CSS1:border-width Border-CSS1:bord ...

CSS3总结三：文字(text)/字体、文本、文本装饰、多列

Text-Decoration text-shadow text-decoration Font font font-face Text 常用Text属性 Multi-column Multi-col ...

CSS3鼠标滑过动画线条边框特效

基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

css3购物网站商品文字提示实例

css3购物网站商品文字提示实例先来看效果图: 当鼠标划过图片时,有着泰迪熊黑色长方形的背景就会出现.来看HTML5+CSS3代码: ..

CSS3下的渐变文字效果实现

如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...

Android 将拼接好并加上边框的图片保存到内存卡中

通过前两篇文章,问们学会了怎样拼接图片.给拼接好的图片加上边框样式,但这还不够,忙活了大半天 终于拼接好并给图片美化了,但是程序一旦推出,之前做的工作都白费了.这时我们会想,能不能把拼接好的图片保存起 ...

小tip:CSS3下的渐变文字效果实现——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借 ...

随机推荐

在SQL语句中加入时间比较作为查询条件

select * from 表名 where 列名 = ? and DATEDIFF(hh,时间列,'2016-08-22 15:05:59.000')<9

Java多线程与并发库高级应用-Callable与Future的应用

Callable这种任务可以返回结果,返回的结果可以由Future去拿 >Future取得的结果类型和Callable返回的结果类型必须一致,这是通过泛型来实现的. >Completion ...

URL编码数据转换为JSON数据

NSString *urlString; urlString=[self    URLDecodedString:urlString]; -(NSString *)URLDecodedString:( ...

windows下使用mingw编译python扩展模块

环境: 1.python2.7.2 2.mingw20120426 说明: PYTHON_HOME:不做特殊说明的话,默认代表python的安装路径. MINGW_HOME:不做特殊说明的话,默认代表 ...

vue简单的导航栏

洛谷P3209 &lbrack;HNOI2010&rsqb;PLANAR&lpar;2-SAT&rpar;

题目描述 若能将无向图G=(V,E)画在平面上使得任意两条无重合顶点的边不相交,则称G是平面图.判定一个图是否为平面图的问题是图论中的一个重要问题.现在假设你要判定的是一类特殊的图,图中存在一个包含所 ...

20171104xlVBA各人各科进退

Sub 各班个人各科进步幅度() Dim dRank As Object Set dRank = CreateObject("Scripting.Dictionary") Dim ...

腾讯云服务器 - 配置JDK环境以及Tomcat&plus;nginx服务器

安装完ngxin以及fastdfs后,那么jdk和tomcat是肯定要装的,本篇很简单,实在没啥好说的,都是基础,略微带一下,如果是大牛路过可以看看吐槽一下 云服务器上初识环境如果没有选择附带其他软件 ...

JAXB 专题二(BSP接口实战)

BSP下单接口 1.xml格式如下 <?xml version="1.0" encoding="utf-8"?>