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

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

如果您是本站会员;我们将为您提供技术支持!!!

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

一:textshadow属性

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

0 9 D ] B { 1 + etext-stroke语法的使用

text: 3 ~ %-stroke:宽度值7 { O S x o 颜色值

解释:

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

1.text-stroke-width属性解释:设置边框的宽度,一般我们可以长度来表a H Z E – q 0 N ;

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

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

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>CSS3 text-strokG F { Ze属性</tit, H ? B a ? B ble>     <style type="text/css">         div         {             font-size:30px;             font-weight:bol~ =  N , P 9d;         }  c s K p         #div2         {              text-stroke:1Q C d _ 4 y k 7 [px red;              -webkit-text-stroke:1px red;              -moz-tY T = d O !ext-stroke:1px red;              -o-text-stroke:1px red;         }     &L U = M 3 slt;/style> </hb X } W 0 :ead> <body&g% , 4 $ ? Y Wt;     <div iH R ^ C 1d="div1">我没有被描边</div>     <div id="; } ^ ;div2">我被描边1像素的红色的边</d; # # . ; Oiv> </bodN q ) #y> </html>

以上代码效果; – C T 1 _ ` |如图:

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

<!DOCTYPE html&f b s E + c P 4gt; <html xmlns="http://www.w3.org/1999/x| - vhtml"> <head>     <tQ V B 5itle>CSS3 text-stroke属性<h i v @ d/title>     <style type="text/css">         div         {             font-family:Verdana;             font-! 9 ) n * !size:50px;             font-weight:bold;             color:transparent;/ u _ 1 * M ! 1 O  /*设置文字P 3 u d颜色为透明*/             text-stroke:2px red;             -wey D y 0bB M f J @ z kit-text-stroke:2px #45B823;             -moz-text-stroke:2px #45B823;         }     </styled ) T F E x ~ )> </p z ! ` z M Qhead> <body>     <div>小( N z D b闫黑客</div> </b. v ^ s 9 ! ` +ody> </html>

 

郑重声明:本网站属学习交流,非赢利性网站。在本网站的言论纯属发表者个人意见,与本网站立场无关。涉及侵权与政治言论一律删除,请所有会员注意。网站资源由会员从网上收集整理所得,版权属于原作者。网站所有资源是进行学习和研究测试之用,请在下载后24小时删除。本站出于学习和研究的目的提供平台供会员进行交流和讨论,如有侵犯原作者的版权,请来信告知,提供证明,我们将立即删除相关链接,谢谢合作!我们的邮件地址是: yuanmayu@163.com
源码鱼 » 使用css/tevt-stroke属性制作文字描边

发表评论


×