Settings for text cutout and transparency values in CSS3 and shadow effects

This article mainly introduces the text skeleton in CSS, transparency value, shadow effect setting example summary, which through the Text-stroke-color transparent value settings can make the text in some degree more gentle, the need for friends can refer to the next

Text-fill-color Create skeleton text:
Code

-webkit-text-fill-color:transparent;   -WEBKIT-TEXT-STROKE:1PX #000;

Effect

Text-stroke-color transparency values make text softer:
Code

Background-image:-webkit-linear-gradient (#eee, #000);   -webkit-background-clip:text;   -webkit-text-fill-color:transparent;

Effect 1

Code

Background-image:-webkit-linear-gradient (#eee, #000);   -webkit-background-clip:text;   -webkit-text-fill-color:transparent;   -WEBKIT-TEXT-STROKE:1PX Transparent;

Effect 2

Contrast you will find the text in effect 2 softer than the effect 1

Text-shadow Text Shadow
Grammar:

Box-reflect:none | [<length>{2,3} && <color>?] [, <length>{2,3} && <color>?] *

Let's implement a shaded text example:
Code

text-shadow:2px 2px 0 #000;

Effect

The Text-shadow has 3 length parameters, the 1th represents a horizontal offset, the 2nd represents a vertical offset, and the 3rd represents a blur (optional)
A slightly softer text shadow:
Code

text-shadow:1px 1px 5px #000;

Effect

Multiple shadows:
Code

text-shadow:1px 1px 5px #000;

Effect

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!