当前位置: 首页 > Web前端 > CSS

一分钟教你如何实现漂亮的文字描边

时间:2023-03-30 23:09:59 CSS

前两天有前同事问我文字描边怎么做,今天就来说说文字描边怎么实现。1.文字描边-webkit-text-stroke文字描边参数:参数1描边大小参数2描边颜色注意:webkit内核只对google有效,safir有效-webkit-text-stroke:1pxred;我们如何达到效果?HTML结构CSSStyleFontStyleFontColorTextStrokeTextShadow我们来看看具体的代码:HTML:

亲爱的,你好吗?没有我的日子,你要安全。

CSS:p{font-size:45px;/*字体大小*/font-weight:700;/*fontbold*/font-family:"ChineseXingkai";/*字体样式*/text-align:center;颜色:#fff;-webkit-text-stroke:1pxpink;/*字体描边的描边大小为1px粉色*/text-shadow:5px5px5pxrgba(211,211,211,0.6);/*文字阴影*/}其实文字的笔画很简单。在给出样式的时候,要注意给出样式的顺序和大小,以目标为基准。风格不可怕,可怕的是粗心大意!