html text-stoke,使用text-stroke 和 text-shadow制作CSS描边文字

描边文字指的是文字只显示描边轮廓。在CSS中，有两种方法可以实现描边文字，分别是为文字设置text-stroke和text-shadow属性。

text-shadow属性可以为文字设置阴影效果。使用text-shadow属性来制作描边文字是个不错的选择，下面的是一段示例代码：

h1 {text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;}

通常两重阴影就可以得到一个不错的描边文字效果，上面代码的结果如下图：

text-shadow两重阴影时得到的描边效果

你会发现使用两重阴影得到的描边效果比较模糊，这和字体有关，某些字体会得到比较清晰的描边效果。上边使用的是微软雅黑字体，描边效果比较模糊。为此，我们可以使用四重阴影俩设置文字的描边效果：

text-shadow: -1px -1px 0 #000,

1px -1px 0 #000,

-1px 1px 0 #000,

1px 1px 0 #000;

使用四重text-shadow阴影，每一重都往不同的方向偏移一个像素，得到下面的效果：

text-shadow四重阴影时得到的描边效果

使用text-shadow来制作描边文字最大的问题是某些线条的接口处不是完全闭合的，仔细观察上面的图片就可以看到。

另外一个制作描边文字的方案是使用text-stroke属性：

text-stroke: thickness color;

text-stroke属性只能指定描边线条的粗细，不能指定线条的样式(如使用虚线描边等)。webkit内核的浏览需要为text-stroke属性添加-webkit-前缀：

h1 {

-webkit-text-stroke: 1px black;

text-stroke: 1px black;

}

使用text-stroke来制作文字描边效果

可以看到，使用text-stroke属性制作的描边文字线条的接口处是完全闭合的。

使用text-stroke属性需要注意的一个问题是，描边的颜色和文字的背景颜色相同时，某些浏览器会看不到任何效果。例如：

h1 {

color: white;

-webkit-text-stroke: 2px black;

text-stroke: 2px black;

background: white;

}

上面的代码使H1标题文字在Chrome 或 Safari浏览器中呈现描边文字效果，但是在其它浏览器中没有任何效果。

要解决上面的问题，你可以先使用color属性来设置文字的颜色，然后通过text-fill-color属性来覆盖文字的颜色，这样在不支持描边的浏览器中，文字会显示为color属性指定的颜色：

h1 {

color: black;

-webkit-text-fill-color: white;

text-fill-color: white;

-webkit-text-stroke: 2px black;

text-stroke: 2px black;

background: white;

}

text-stroke属性和text-fill属性的浏览器兼容性如下图：

css text-stroke属性的浏览器兼容性

html text-stoke,使用text-stroke 和 text-shadow制作CSS描边文字相关推荐

CTPN模型详解--Detecting Text in Natural Image with Connectionist Text Proposal Network
文章目录 Abstract 1 Introduction 1.1 Contributions 2 Related Work 3 Connectionist Text Proposal Network ...
mysql中text格式化_mysql中char,varchar,text
1.char char最大长度是255字符,注意是字符数和字符集没关系. 1)可以有默认值, 2)尾部有空格会被截断 3)不管汉字.英文,还是其他编码,都可以存255字符 2.varchar 1)va ...
首页静态生成错误：客户端发现响应内容类型为“text/html”，但应该是“text/xml”...
首页静态生成错误:客户端发现响应内容类型为"text/html",但应该是"text/xml"解决方法: 最近在做首页静态生成,一直遇到这样的问题客户端发 ...
detecting text in natural image with connectionist text proposal network
场景文字检测-CTPN原理与实现 - 知乎对于复杂场景的文字识别,首先要定位文字的位置,即文字检测.这一直是一个研究热点. Detecting Text in Natural Image with C ...
【Sublime text 3】卸载重装Sublime text 3英文版
文章目录问题描述解决过程问题描述笔者之前所用Sublime text 3为中文版,发现不能安装插件的问题,现尝试卸载重装英文版. 解决过程卸载关键: 在C盘搜索"sublime t ...
BeautifulSoup中的.text 和get_text()的区别，.text与.string的区别
.text 和get_text()的区别结论: 1.不带参数调用get_text() 与.text 是等效的,没有区别. 2.但是,get_text 还可以支持各种关键字参数来改变它的行为方式(se ...
html中text函数,text函数 excel中如何使用text函数
如果我们需要将期数和日期进行合并的话,就需要用到这test函数.当然有许多人对着一个函数,肯定是第一次看到,自然也不知道这一个函数的具体使用方法.而今天我们要了解的内容就是这一个函数的具体使用方法. ...
在text html模版中写js,Rails3使用text/html内容类型而不是text/javascript呈现js.erb模板...
我正在使用3.0.0.beta3构建一个新的应用程序.我只是尝试将js.erb模板呈现给Ajax请求以执行以下操作(在publications_controller.rb中): def get_pub ...
mysql text类型使用方法_MySQL使用TEXT/BLOB类型的知识点详解
一.TEXT和BLOB的区别 TEXT和BLOB家族之间仅有的不同是BLOB类型存储的是二进制数据,没有排序规则或字符集,而TEXT类型有字符集或排序规则.说白了如果要储存中文则选择TEXT. 二.默 ...
mysql的text与tinytext_MySQL中tinytext、text、mediumtext和longtext等各个类型详解
今天有个小伙伴在群里问text为什么长度是0,会不会影响存数据失败,这里就有各个类型的详细说明 TEXT.TINYTEXT.MEDIUMTEXT.LONGTEXT的区别: 储存不区分大小写的字符数据 ...

html text-stoke,使用text-stroke 和 text-shadow制作CSS描边文字

html text-stoke,使用text-stroke 和 text-shadow制作CSS描边文字相关推荐

最新文章

热门文章