首页前端开发CSScss3文字怎么描边?

css3文字怎么描边?

时间2024-05-21 01:44:04发布访客分类CSS浏览38
导读:首先我们来看一看css3中文本描边text-stroke属性。 说明:text-stroke属性只有webkit内核的Safari和Chrome支持。 语法:text-stroke:|| 属性值: :设置或检索对象中的文字的...
首先我们来看一看css3中文本描边text-stroke属性。 说明:text-stroke属性只有webkit内核的Safari和Chrome支持。 语法:text-stroke:|| 属性值: :设置或检索对象中的文字的描边厚度 :设置或检索对象中的文字的描边颜色 来直接看一个例子:

PHP中文网文字描边

h1{ -webkit-text-stroke:1.0px#000000; color:pink } css3文字描边效果如下:



需要注意的是: 文本描边text-stroke属性只有在字体很大的时候才能看到描边效果,如果字体比较小,描边颜色会遮住文字本身颜色,如图: 2345截图20180926100328.png 除了上述使用text-stroke属性来实现文字描边之外,其实还可以利用文字阴影属性text-shadow来进行文字描边,text-shadow属性的具体内容我们在css3如何设置文字阴影?css3用text-shadow设置文字阴影的方法已经介绍过了,这里就不具体说了,所以我们就来直接看text-shadow属性实现字体描边的实例:

PHP中文网文字描边

h1{ text-shadow:2px2px0pxblue; color:pink; } css3文字描边效果如下:



说明:如果觉得文字描边不够粗,可以使用多重字体阴影,这样就可以实现较粗的文字描边。 css3较粗的文字描边代码如下:

PHP中文网文字描边

h1{ text-shadow: 1px1px0pxblue, -1px-1px0pxblue, 2px2px0pxblue, -2px-2px0pxblue, 3px3px0pxblue, -3px-3px0pxblue; color:pink; } css3文字描边效果如下:


相关文章推荐: 1.如何使用csstext-stroke属性来制作文字描边?(源代码) 2.css3怎么给文字加描边?css3实现字体描边样式的方法(代码详解) 相关视频推荐: 1.CSS视频教程-玉女心经版 以上就是本篇文章的全部内容了,关于文章中所提到的关于css3中的属性的具体内容大家可以参考css3使用手册来进行学习。


声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: css3文字怎么描边?
本文地址: https://pptw.com/jishu/664545.html
大专学编程是什么 分享CSS中设置文字颜色的五种方法

游客 回复需填写必要信息