What is it

CSS, short for Cascading Style Sheets, is a markup language that is interpreted and implemented by the browser to make pages look good

Css3 is the latest standard for CSS. It is backward compatible. All features of CSS1/2 are available in CSS3

CSS3 also adds a number of new features that make for a better development experience for developers

Some common features are listed from several dimensions, as follows

Second, selector

New style

A border

Css3 has three new border attributes:

  • Border-radius: creates a rounded border
  • Box-shadow: Adds a shadow to an element
  • Border-image: Use the image to draw the border

box-shadow

Set the element shadow with the following properties:

  • The level of the shadow
  • Vertical shadow
  • Fuzzy distance (real and false)
  • Shadow size (shadow size)
  • Shadow color
  • Inner/outer shadows

The horizontal and vertical shadows must be set

background

Background properties: background-clip, background-origin, background-size and background-break

background-clip

Used to determine the background area, there are several possible properties:

  • background-clip: border-box; The background is displayed starting at border
  • background-clip: padding-box; The background is displayed from the padding
  • background-clip: content-box; The background content area is displayed
  • background-clip: no-clip; Default property, equivalent to border-box

Usually, the background covers the entire element, and you can use this property to set the background color or image coverage

background-origin

When we set the background image, will the image be aligned at the top left corner, but at the top left corner of the border, or at the top left corner of the padding or content? Border-origin is used to set this up

  • background-origin: border-box; Calculates background-position from border
  • background-origin: padding-box; Computes background-position from the padding
  • background-origin: content-box; Calculates background-position from content

The default is padding-box, which takes the top left corner of the padding as the origin

background-size

Background-size property is used to adjust the size of the background image, mainly used to set the image itself. There are the following possible attributes:

  • background-size: contain; Shrink image to fit elements (maintain pixel aspect ratio)
  • background-size: cover; Extend elements to fill elements (maintain pixel aspect ratio)
  • background-size: 100px 100px; Reduce the image to a specified size
  • background-size: 50% 100%; Shrink the image to the specified size. The percentage is relative to the size of the contained elements

background-break

Elements can be divided into separate boxes (such as making inline elements span multiple lines). Background-break controls how the background is displayed in these different boxes

  • background-break: continuous; The default value. Ignore the distance between boxes (i.e., elements that are not divided into boxes are still a whole)
  • background-break: bounding-box; Take into account the distance between the boxes;
  • background-break: each-box; Redraw the background individually for each box

The text

word-wrap

Grammar: word – wrap: normal | break – word

  • Normal: Use the default line break of the browser
  • Break-all: allows line breaks inside words

text-overflow

Text-overflow sets or retrieves how to display when moving past the bounds of the specified container. The property has two values to choose from:

  • Clip: Clip the text
  • Ellipsis: Displays ellipsis symbols to represent trimmed text

text-shadow

Text-shadow Applies a shadow to text. Can specify horizontal shadows, vertical shadows, blur distance, and shadow color

text-decoration

CSS3 now supports deeper rendering of text, with three properties to set:

  • Text-fill-color: Sets the internal fill color of the text
  • Text-stroke-color: Sets the text border fill color
  • Text-stroke-width: Sets the text border width

color

Css3 has new color representation methods rGBA and HSLA

  • Rgba is divided into two parts, RGB for color value and A for transparency
  • Hala is divided into four parts, H for hue, S for saturation, L for brightness, and A for transparency

Fourth, the transtion

The transition property can be specified as a transition effect of one or more CSS properties separated by commas. Two things must be specified:

Excessive effect duration

  • The syntax is as follows:

Transition: CSS properties, Time spent, effect curve (default ease), delay time (default 0

transition-property: width; 
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
Copy the code

Fifth, the transform

The transform property allows you to rotate, scale, tilt, or pan a given element

Transform-origin: Transform the position of the element (to transform around that point). Default is (x,y,z):(50%,50%,0)

Usage:

  • Transform: Translate (120px, 50%
  • Transform: scale(2, 0.5) : scale
  • Transform: rotate(0.5turn) : rotate
  • Transform: skew(30DEg, 20DEg) : skew

Six, animation

Animation this common use is also a lot of, mainly is to do a preset animation. Animations that interact with some of the pages, the results and transitions should be the same so that the page is not so rigid

Animation also has many properties

  • Animation-name: indicates the animation name
  • Animation-duration: animation duration
  • Animation-timing-function: animation time function
  • Animation-delay: indicates the animation delay time
  • Animation-rotund-count: The number of times an animation is executed, which can be set to an integer or infinite, meaning an infinite loop
  • Animation-direction: animation execution direction
  • Animation-paly-state: indicates the animation playback state
  • Animation-fill-mode: animation filling mode

Seven, the gradient

A color gradient is a smooth transition between two colors. Css3 gradients include

  • Linear-gradient: a linear gradient

❝

background-image: linear-gradient(direction, color-stop1, color-stop2, …) ;

❞

  • Radial gradient: radial gradient

❝

linear-gradient(0deg, red, green);

❞

Eight, elastic box layout

  • Flex, Grid layout, see author’s next article for detailed updates

Speed update at……