css之文字描边

---

传统方式实现

html

<p>文字描边效果p>

---

scss

@mixin text-stroke($color: #ffffff, $width: 1px) {
    text-shadow: 0 -#{$width} #{$color},
    #{$width} -#{$width} #{$color},
    #{$width} 0 #{$color},
    #{$width} #{$width} #{$color},
    0 #{$width} #{$color},
    -#{$width} #{$width} #{$color},
    -#{$width} 0 #{$color},
    -#{$width} -#{$width} #{$color};
}

p {
    font-size: 10rem;
    font-weight: bold;
    @include text-stroke(#ff0000, 2px);
}

---

通过scss编译后的css

p {
    font-size: 10rem;
    font-weight: bold;
    text-shadow: 0 -2px #ff0000, 2px -2px #ff0000, 2px 0 #ff0000, 2px 2px #ff0000, 0 2px #ff0000, -2px 2px #ff0000, -2px 0 #ff0000, -2px -2px #ff0000;
}

---

优缺点

1、兼容性好。
2、描边不是很均匀。
3、文字如果设置为透明，那么就会显示描边的颜色，也就是不能设置文字颜色为透明。

---

第二种方式

html需要写两遍文字

<p data-cont="文字描边效果">文字描边效果p>

---

html

<p>文字描边效果p>

<script>
	const p = document.querySelector('p');
	p.dataset.content = p.textContent;
script>

---

scss

p {
    font-size: 10rem;
    font-weight: bold;
    -webkit-text-stroke: #ffffff 2px;
    // color: transparent;
    position: relative;
}

// 描边文字变小的解决方法之一
// 此方案不能设置文字为透明，设置了也无意义
// 如果想要字体透明，可以设置字体放大
p::after {
	// 动态读取属性
    content: attr(data-content);
    -webkit-text-stroke: 0;
    position: absolute;
    left: 0;
}

---

优缺点

1、兼容性还算可以。
2、描边后的文字会变细。
3、文字如果设置为透明，那么描边依然存在，透明的只是文字本身，不会影响到描边效果。
4、原理是被描边的文字，描边方式是居中描边。