CSS中如何给字体加边框在Web设计中,为了突出某些文字或标题,我们需要在它们周围加上边框。CSS提供了多种方式来实现这个效果,本文将介绍如何给字体加边框。使用textshadow属性textshad...
CSS中如何给字体加边框
在Web设计中,为了突出某些文字或标题,我们需要在它们周围加上边框。CSS提供了多种方式来实现这个效果,本文将介绍如何给字体加边框。
使用text-shadow属性
text-shadow属性可以为字体添加阴影效果,也可以利用它来模拟边框。这种方法比较简单,但效果不如其他方法好。
例如,我们可以给一个h1标题添加一个5px的红色边框:
html
<pre>
<style>
h1{
text-shadow: 1px 1px 0 red, -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red;
}
</style>
<h1>Hello World!</h1>
html
<pre>
<style>
p{
outline: 2px solid blue;
}
</style>
<p>Hello World!</p>
html
<pre>
<style>
h2{
-webkit-text-stroke: 5px green;
text-stroke: 5px green;
}
</style>
<h2>Hello World!</h2>