最新公告
  • 欢迎您光临剑来源码,购买独家源码,请前往销售大厅!立即加入我们
  • 使用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属性的用法举例

    <!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)

    剑来源码专注于网络资源分享,百度搜索:剑来源码。
    剑来源码 » 使用css/tevt-stroke属性制作文字描边

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    剑来源码
    专注为开发人员提供建站资源

    发表评论

    升级SVIP尊享更多特权立即升级