普通的css普通的描边字

Posted 2020-06-17

当我们在切图的时候，经常会碰见这样的 普通 的描边字，如果我们都切成图片将造成大量的图片素材，工作量大，加载速度慢，难维护。

经过反复实验，发现使用 text-shadow 的多重属性即可实现，多重属性主要用 ,（逗号） 来分隔，给元素可以设置多个不同参数的属性。

.text-shadow {
    color: #FFE339;
    text-shadow: 1px 0 0 #622E00, -1px 0 0 #622E00, 0 1px 0 #622E00, 0 -1px 0 #622E00;
    }

以上代码主要设置4个多重属性，然后分别让他们位于元素的上下左右，从而实现描边的效果。

注意：text-shadow的最后一个 ;(分号) 一定不能省略，CssGaga压缩时会删除最后一个属性的分号，导致页面出错，所以text-shadow不能放在最后！

 

 

就这样，普通的css就做出了普通的描边字！超简单的！