[分享]css内描边外描边

CSS内描边和外描边是两种不同的样式，它们都可以用来美化网页的效果。下面我们来了解一下这两种样式的使用方法。/ CSS内描边 / p { color: fff; / 设置字体颜色为白色 / webki...

CSS内描边和外描边是两种不同的样式，它们都可以用来美化网页的效果。下面我们来了解一下这两种样式的使用方法。

/* CSS内描边 */
p {
    color: #fff; /* 设置字体颜色为白色 */
    -webkit-text-stroke: 2px #000; /* 在字体周围描边，边框宽度为2px，颜色为黑色 */
    text-stroke: 2px #000;
}

/* CSS外描边 */
p {
    color: #fff; /* 设置字体颜色为白色 */
    text-shadow: 2px 2px #000; /* 在字体周围添加2px大小的黑色阴影 */
} 

对于CSS内描边，和文字相关的样式都是该元素的属性，使用-webkit-text-stroke和text-stroke属性来完成。上述代码中的值“2px”表示描边的宽度，值“#000”表示描边的颜色，把它设置成黑色，最后将段落的字体颜色设置为白色，就可以达到内描边的效果。

而CSS外描边则是采用text-shadow属性，来为元素添加文字周围的阴影。上述代码中的“2px”表示阴影的水平和垂直偏移量，即2px，用来使阴影向右和向下移动。值“#000”表示阴影的颜色，把它设置为黑色，最后将段落的字体颜色设置为白色，就可以获得外描边的效果。

总的来说，无论是内描边还是外描边，它们都可以很好地提高文本在页面上的可读性和美观程度。我们可以根据自己的需求选择使用哪一种样式来优化网页。