CSS3 new Features

Powerful Selector

Allows specific HTML elements to be specified in the tag without having to use redundant classes, IDs, or JS scripts.

The advanced selector avoids adding a large number of class, ID attributes to the label, making it more concise and lightweight, and easier to maintain.

Semi-transparent effect

Rgba and Hsla not only set the color, but also set the transparency of the elements.

You can also use the Opacity property to define the opacity of an element.

Extended Knowledge:

RGBA is the color space representing red (red) green Blue (blue) and Alpha.

        alpha channel generally used as an opacity parameter. If the alpha channel value of a pixel is 0%, then it is completely transparent (that is, invisible), and a value of 100% means a completely opaque pixel (traditional digital Image

            hsla (h,s,l,a):     

• • • H:

    • Hue (hue). 0 (or 360) indicates red, 120 is green, 240 is blue, and other values are preferred to specify the color. Value is: 0-360

    • S

    • Saturation (saturation). Values are: 0%-100%

    • L

    • Lightness (brightness). Values are: 0%-100%

    • A:

    • Alpha transparency. Value between 0~1.

Multi-column Layouts

You don't have to use multiple div tags to implement multi-column layouts, allowing text to be structured in a paper-like newspaper.

Multi-background map

Allows background properties to set values for multiple properties, such as Background-image, Background-repeat, Background-size, Background-position, Background-originand, Background-clip and so on, so that you can load the elements on the addition of multi-layered background images. At the same time, it can be used to design complex web effects such as rounded corners and overlapping backgrounds.

Text Shadow

Text-shadow has existed in CSS2, but it has not been widely used. CSS3 redefined it, providing a new cross-browser approach to making text look more visible.

Open font Types

@font-face has been introduced in CSS2, but is not widely used like other CSS3, mainly because of licensing and copyright issues (embedded fonts are easy to download from the Web).

Rounded Corners

The Border-radius property does not require a background image to achieve rounded corners.

Border picture

Border-image allows you to set a picture on the border of an element, making the original monotonous border style richer. We can also clearly define how a border should be scaled or tiled.

Box Shadow

Box-shashow can add a shadow to an HTML element without having to use an extra label or background image. The Text-shashow property enhances the detail of the design, but does not affect the readability of the content or the layout of the page.

Media Enquiry

Media query, which you can use to define a matching style for different display devices. Instead of having to write style sheets for different devices individually, you don't need to use JavaScript scripts to determine the properties and functionality of the user's browser, allowing for a flexible, more popular, intelligent fluid layout that meets the diverse requirements of the user's browser resolution.

This article is from the "Isymu" blog, make sure to keep this source http://isymu.blog.51cto.com/1460577/1663207

CSS3 new Features