使用css/tevt-stroke属性制作文字描边
使用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属性的用法举例：
|
1 2 |
<!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> |
以上代码效果如图：
如果你感觉在实例应用中并不是很常用，但是我们可以配合其他属性进行使用，很多人都喜欢配合color:transparent去使用，例如：
|
1 |
<!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> |
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等其他资源，不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以发布本站，分享有金币奖励和额外收入!
©️创享网络科技工作室- 您的云上资源网;优质源码+优质服务=成功!
创科资源平台 » 使用css/tevt-stroke属性制作文字描边
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等其他资源，不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以发布本站，分享有金币奖励和额外收入!
©️创享网络科技工作室- 您的云上资源网;优质源码+优质服务=成功!
创科资源平台 » 使用css/tevt-stroke属性制作文字描边
