css3 怎么写描边

发布网友发布时间：2022-04-06 11:22

我来回答

共2个回答

懂视网时间：2022-04-06 15:44

首先我们来看一看css3中文本描边text-stroke属性。

说明：text-stroke属性只有webkit内核的Safari和Chrome支持。

语法：text-stroke：<' text-stroke-width '> || <' text-stroke-color '>

属性值：

<' text-stroke-width '>：设置或检索对象中的文字的描边厚度

<' text-stroke-color '>：设置或检索对象中的文字的描边颜色

来直接看一个例子：

<h1>PHP中文网文字描边</h1>

h1{
 -webkit-text-stroke: 1.0px #000000;
 color:pink
}

css3文字描边效果如下：

2345截图20180926095617.png

需要注意的是：

文本描边text-stroke属性只有在字体很大的时候才能看到描边效果，如果字体比较小，描边颜色会遮住文字本身颜色，如图：

2345截图20180926100328.png

除了上述使用text-stroke属性来实现文字描边之外，其实还可以利用文字阴影属性text-shadow来进行文字描边，text-shadow属性的具体内容我们在css3如何设置文字阴影？css3用text-shadow设置文字阴影的方法已经介绍过了，这里就不具体说了，所以我们就来直接看text-shadow属性实现字体描边的实例：

<h1>PHP中文网文字描边</h1>

h1{text-shadow:2px 2px 0px blue;
color:pink;
}

css3文字描边效果如下：

2345截图20180926102023.png

说明：如果觉得文字描边不够粗，可以使用多重字体阴影，这样就可以实现较粗的文字描边。

css3较粗的文字描边代码如下：

<h1>PHP中文网文字描边</h1>

h1{text-shadow:
 1px 1px 0px blue,
 -1px -1px 0px blue,
 2px 2px 0px blue,
 -2px -2px 0px blue,
 3px 3px 0px blue, 
 -3px -3px 0px blue;
color:pink;
}

css3文字描边效果如下：

2345截图20180926102622.png

相关文章推荐：
1.如何使用css text-stroke属性来制作文字描边？（源代码）
2.css3怎么给文字加描边？css3实现字体描边样式的方法（代码详解）
相关视频推荐：
1.CSS视频教程-玉女心经版

热心网友时间：2022-04-06 12:52

border: 1px red solid;

有很多参数，自己百度：css border 和 css outline