css3怎么加文字描边
导读:本文共2823字符,通常情况下阅读需要9分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: css3可以加描边,方法:1、使用text-shadow属性,通过给文字周围添加文字阴影来实现描边效果;2、使用text-stroke属性,语法“text-stroke:描边宽度 颜色;”;3、利用SVG给文字加描边。本教程操作环境:windows7... ...
目录
(为您整理了一些要点),点击可以直达。
css3可以加描边,方法:1、使用text-shadow属性,通过给文字周围添加文字阴影来实现描边效果;2、使用text-stroke属性,语法“text-stroke:描边宽度 颜色;”;3、利用SVG给文字加描边。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
text-shadow 文字描边
text-shadow:向文本设置阴影。
text-shadow:color||length||length||opacity
color:指定颜色。
length:第一个length指定阴影在水平方向上的延伸距离,第二个length指定阴影在垂直方向上的延伸距离,可以为负值。
opacity:指定阴影模糊效果的作用距离。
用逗号分隔的4个属性值代表的方向顺序为右下左上。
<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>text-shadow-文字描边</title> <style> .demo{ height:200px; text-align:center; font-family:Verdana; font-size:30px; font-weight:bold; background:peru; color:#000; } .stroke{ text-shadow:#fff1px00,#fff01px0,#fff-1px00,#fff0-1px0; } </style> </head> <body> <divclass="demo"> <p>没有添加描边</p> <pclass="stroke">添加了字体描边</p> </div> </body></html>
text-stroke 文字描边
CSS 中有个专门用于文字描边的属性 -webkit-text-stroke
,可以控制描边的宽度和颜色,比如
.text{-webkit-text-stroke:2px#333;}
效果如下
确实有描边了,但是文字好像瘦了一圈,如果觉得不太明显,可以再设置大一点
从这里可以看出,-webkit-text-stroke
其实是 居中描边,并且是覆盖在文本上的,也无法更改描边方式。而事实上,很多设计工具都是可以选择描边方式的,比如 figma
那么,如何实现外描边效果呢?
也是可以的!用两层文本,一层文本描边,一层文本渐变就可以了,为了节省标签,可以用伪元素来生成
<pclass="text"data-title="为你定制发现精彩">为你定制发现精彩</p>
::before
设置渐变,位于上方,原文本设置描边,位于下方,注意把 ::before
的-webkit-text-stroke
去除
.text::before{content:attr(data-title);position:absolute;background-image:linear-gradient(#FFCF02,#FF7352);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:0;}.text{-webkit-text-stroke:6px#333;}
叠加示意如下
改变不同的描边也不会出现文字“变瘦”的情况
SVG 文字描边
SVG 也可以实现描边效果,和 CSS 比较类似,应该说 CSS 是借鉴 SVG 的,通过 stroke
和 stroke-width
来控制描边颜色和大小,比如
.text{/*其他*/stroke-width:4px;stroke:#333;}
可以得到这样的效果
和 CSS 表现一样,都是居中描边,也无法改变。
不一样的是,SVG 控制更为灵活,默认是先填充、然后再描边,所以看着是描边在填充之上,但是,我们可以改变这种规则,设置先描边,再填充,那么填充的颜色就会覆盖在描边之上了。SVG 中改变这种规则的可以通过 paint-order 来设置。
.text{/*其他*/stroke-width:4px;stroke:#333;paint-order:stroke;/*先描边*/}
这样就实现了外描边效果,是不是比 CSS 方便许多?
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
css3怎么加文字描边的详细内容,希望对您有所帮助,信息来源于网络。