如何使用css text-stroke属性来制作文字描边?(源代码)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

很多人不知道如何利用css text-stroke属性给页面的文字进行描边,其实利用textshadow属性给文字描边也是一件很简单的事情,那么如何使用css text-stroke属性来制作文字描边?下面我们来总结一下textshadow属性。

一:textshadow属性:

很多人在css中使用text-stroke进行对文字的描边,其实给一行文字进行描边,实际上就是给一行文字加边框。

二:text-stroke语法的使用:

text-stroke:宽度值 颜色值

解释:

其实text-stroke是一个符合的语法,是有宽度值和颜色值两个子属性组成。

1.text-stroke-width属性解释:设置边框的宽度,一般我们可以长度来表示

2.text-stroke-color属性解释:一般来设置边框的颜色

三:text-stroke属性的用法举例:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>CSS3 text-stroke属性</title>     <style type="text/css">         div         {             font-size:30px;             font-weight:bold;         }         #div2         {              text-stroke:1px red;              -webkit-text-stroke:1px red;              -moz-text-stroke:1px red;              -o-text-stroke:1px red;         }     </style> </head> <body>     <div id="div1">我没有被描边</div>     <div id="div2">我被描边1像素的红色的边</div> </body> </html>

以上代码效果如图:

如何使用css text-stroke属性来制作文字描边?(源代码)

如果你感觉在实例应用中并不是很常用,但是我们可以配合其他属性进行使用,很多人都喜欢配合color:transparent去使用,例如:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>CSS3 text-stroke属性</title>     <style type="text/css">         div         {             font-family:Verdana;             font-size:50px;             font-weight:bold;             color:transparent;  /*设置文字颜色为透明*/             text-stroke:2px red;             -webkit-text-stroke:2px #45B823;             -moz-text-stroke:2px #45B823;         }     </style> </head> <body>     <div>5G云资源分享网</div> </body> </html>

效果如图:

如何使用css text-stroke属性来制作文字描边?(源代码)

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 如何使用css text-stroke属性来制作文字描边?(源代码)