使用css/tevt-stroke属性制作文字描边

作者 : administrator 本文共1171个字,预计阅读时间需要3分钟 发布时间: 2019-09-28 共1.35K人阅读

使用css/tevt-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/tevt-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>小闫黑客</div> </body> </html>

 
使用css/tevt-stroke属性制作文字描边-手游资源站

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 下载资源请24小时内删除 运营请支持正版 请合法合规运营
2.不建议充值下载-请大家每天签到或发布资源获取下载,请大家一点要摆正自己的思想关 坚决杜绝 知法犯法
3.如果贵公司发现本站有侵权行为,请来联系我们给予指正,本站将即刻删除链接.分享目的仅供大家学习和交流,请不要用于商业用途!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务 请大家谅解!

手游资源站 » 使用css/tevt-stroke属性制作文字描边

发表回复