CSS3 Study Notes

1. Rgba, transparency

It is well known that when you set the transparency of the element background, the content inside the element inherits the transparency properties of the external element, which is inconsistent with our original intent, and the RGBA color pattern is not solved by the problem.

Background:rgba (0,0,0,.3); the first three values correspond to R (Red), g (green), and B (blue), which constitute the three elements of the color; the fourth value is transparency (alpha;0 is transparent, 1 is opaque)

Rgba can be used to set any color-related properties, such as its own color, border color, background color, shadow color, etc.;

2, Text-shadow

The Text-shadow consists of the following order: X-offset,y-offset,blur and color, i.e. vertical offset, horizontal offset, shadow width (blur radius), and color value.

text-shadow:2px 3px 2px #ccc;

If a negative value is applied to the horizontal offset (x-offset), the shadow appears to the right of the element, and if negative values are applied to the vertical offset (y-offset), the shadow appears at the top of the element, and RGBA can be used on the shadow color. The larger the value of the blur radius, the more blurry the shadow, and the clearer the shadow is when set to 0 o'clock.

You can also specify a series of Text-shadow values (separated by commas), and the following example uses two Text-shadow to implement the text bulge effect (up and down 1px).
text-shadow:0 1px 0 #fff, 0-1px 0 #000;

CSS3 Study Notes