Shulou(Shulou.com)06/01 Report--

This article focuses on "what are the new features of CSS3". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what are the new features of CSS3"?

1. Attribute selector (commonly used simple induction)

[attribute=value] is used to select elements with specified attributes and values.

[title=W3School] {border:5px solid blue;}

[attribute~=value] contains elements for the specified vocabulary. Descendant selector

[title~=hello] {color:red;}

[attribute | = value] is used to select an element with an attribute value that begins with a specified value, which must be the entire word.

[lang | = en] {color:red;} Hello!

Hi!

[attribute ^ = value] matches each element whose attribute value begins with the specified value.

A [src ^ = "https"]

[attribute$=value] matches each element whose attribute value ends with the specified value.

A [src$= ".pdf"]

[attribute*=value] contains each element of the specified value.

A [src*= "abc"]

two。 Pseudo-class selector (commonly used simple induction)

3. Color

RGBA, HSLA mode

Advantages: compared with opacity, it has no inheritance, that is, it will not affect the transparency of child elements.

HSLA mode

H is chromaticity, with values ranging from 0 to 360 degrees, 0 degrees is red, 120 degrees is green, and 240 degrees is blue. 360 degrees is also red.

S is the saturation, the purity of the color, is a percentage value, the value is 0% 100% 100% 0% saturation is the lowest, 100% saturation is the highest.

L is the brightness, which is also a percentage value. The value is 0%, 100%, 100%, 0%, 0%, 0%, 100%, 0%, 100%, 100%, 100%, 100%, 0%, 100%, 100%, 0%, 100%, 0%, 100%, 0%, 100%, 0%, 100%, 0%, 100%, 0%, 100%, 0%, 100%, 0%, 100%, 0%, 100%, 0%, 100%, 0%, 100%, 100%, 0%, 100%, 0%, 100%, 0%, 100%, 100%, 0%, 100%, 0%, 100%, 0%, 100%, 0%, 100%, 0%, 100%, 0%, 100%, 0%, 0%, 0%, 0%, 0%

An is opacity, which is completely transparent at 0.0: 1.0 and completely opaque at 1.0.

Image.png

4. Text Shadow text-shadow, fillet Border border-radius, Shadow box-shadow, and reflection box-reflect

Text-shadow

Image.png

X-shadow is required. The position of the horizontal shadow. Negative values are allowed.

Y-shadow is required. The position of the vertical shadow. Negative values are allowed.

Distance is optional. Blurred distance

Color is optional. The color of shadow

Box-shadow

Summary of new features of CSS3

X-shadow is required. The horizontal offset of the shadow can be positive or negative. A positive value indicates that the shadow is on the right and a negative value indicates that the shadow is on the left.

Y-shadow is required. The vertical offset of the shadow can be positive or negative, a positive value indicates that the shadow is above, and a negative value indicates that the shadow is below.

Distance is optional. The shadow blurs the distance. It can only be a positive value, and a value of 0 means that the shadow does not have a blur effect, and the higher the value, the more blurred the edge of the shadow.

Size is optional. Shadow extension radius. Can be positive or negative, a positive value indicates that the entire shadow is extended and enlarged, and a negative value indicates a reduction.

Color

Optional. The color of the shadow.

Inset

Optional. Change the outer shadow (outset) to the inner shadow.

Box-reflect

Add one or more reflections to the box.

(1) direction: defines the direction of reflection. Values include:

5.CSS3 box model

6.word-break

Image.png

7.text-overflow

Image.png

At this point, I believe you have a deeper understanding of "what are the new features of CSS3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.