Article Directory
traditional way
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);
}
css compiled by scss
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;
}
Advantages and disadvantages
1. Good compatibility.
2. The stroke is not very uniform.
3. If the text is set to transparent, then the color of the stroke will be displayed, that is, the text color cannot be set to transparent.
the second way
HTML needs to write text twice
<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;
}
Advantages and disadvantages
1. The compatibility is not bad.
2. The text after the stroke will become thinner.
3. If the text is set to be transparent, the stroke still exists, and only the text itself is transparent, which will not affect the stroke effect.
4. The principle is the stroked text, and the stroke method is center stroke.