CSS3---rendering properties

1. Counter

The CSS3 counter (CSS Counters) allows us to use CSS to count any element in a page, and to implement a function similar to a sequential list. Compared to an ordered list, it is characterized by the ability to count arbitrary elements while achieving a personalized count.

1> Syntax
counter-reset: [<identifier> <integer>?] + | none | Inherit
Meaning: Used to define the initial value and scope of the counter, the default is None.
<identifier>: Counter Name
<integer>: The initial value of the counter
When the element display is none, the property is invalidated.

2> Syntax
counter-increment: [<user-ident> <integer>?] + | None
Meaning: Used to increment the counter, the default value is None (Block counter increase).
<user-ident>: Counter name that requires an increment
<integer>: The value of the counter increment, which can be negative.
We can add several counters at the same time. When the element display is none, the property is invalidated.

3> Syntax
　　Content: [<counter>]+<counter> = counter (name) |  Counter (Name,list-style-type) |   Counters (name,string) | Counters (Name,string,list-style-type)
Meaning: Using counters, you need to combine:: Before and:: After use . You can use multiple counters at the same time.

4> Syntax Format
@counter-style counterstylename {
System: Algorithm;
Range: scope of use;
Symbols: symbols; or additive-symbols: symbols;
Prefix: prefix;

suffix: suffix;
Pad: Supplement 0 (eg. 01,02,03);
Negative: negative policy;
Fallback: Default value after error;
Speakas: Voice strategy;

}

　　Custom Counter Style Example
@counter-style Cjk-heavenly-stem {
system:alphabetic;
Symbols: "\7532" "\4e59" "\4e19" "\4e01" "\620a" "\5df1" "\5e9a" "\8f9b" "\58ec" "\7678";
/* N-propyl Xing */
Suffix: ",";
}

2. Shapes Research shape

The CSS3 shape (CSS3 shape) describes the use of geometry in CSS, and for Level 1 (candidate criteria), you can use shape properties to change the layout of the content flow next to the shape.

1> Syntax
Shape-outside:none | [<basic-shape> | | <shape-box>] | <image>
Meaning: Use shape to change the layout flow of the next content, the default value is None.
<basic-shape>: Drawing a shape using the basic Shapes function
<shape-box>: Using box model to get shape
<image>: Getting shapes from an external image
Note that this applies only to floating elements.

2> syntax (drawing basic Shapes)
　　Inset () = inset (<shape-arg>{1,4} [round <border-radius>]?)
Meaning: Draws a rectangle.
Inset can accept 1-4 parameters, similar to the designation of a margin four value (upper-right-left order).
Border-radius is an optional parameter that defines the rounded corners of the rectangle.

Application:Shape-outside:inset (50px) Draw Rectangle

Shape-outside:inset (50px round 20px) Rounded Rectangle

3> syntax (drawing basic Shapes)
Circle () = Circle ([<shape-radius>]? [at <position>]? )
Meaning: Draw a circle. The default is a circle centered around the center of the element.
The Shape-radius is an optional parameter that represents the radius of the circle. Can be numeric, percent, not negative. It can also be closest-side (near-end), farthest-side (remote) two keywords.
The position is an optional parameter that represents the center position.

4> syntax (drawing basic Shapes)
ellipse () = Ellipse ([<shape-radius>{2}]? [at <position>]? )
Meaning: Draw an ellipse. The default is a circle centered around the center of the element.
The Shape-radius is an optional parameter, and two values represent the x-axis and y-axis radius, respectively. Can be numeric, percent, not negative. It can also be closest-side (near-end), farthest-side (remote) two keywords.
The position is an optional parameter that represents the center position.

5> syntax (drawing basic Shapes)
Polygon () = Polygon ([<fill-rule>,]? [<shape-arg> <shape-arg>]#)
Meaning: Draw a polygon.
Fill-rule is an optional parameter that represents the fill rule for polygons. You can accept nonzero, evenodd as parameters.
Shape-arg represents polygon vertex coordinates, each pair represents a point and requires at least three points.

Use shape edit to assist in drawing shapes.
CSS Shapes Editor for Chrome--chrome browser plugin
CSS Shapes Editor for Brackets-brackets editor plugin
Standalone CSS Shapes editor-standalone Shape editor

6> syntax (change shape by box model)
<shape-box> = <box> | Margin-box
<box> = Border-box | Padding-box | Content-box
Meaning: Use the box model to get the shape.

7> getting shapes from external images

Using an external image to get the shape requires an image with an alpha channel
Pixels in the image that have alpha exceeding the threshold will be used to define the shape
The threshold value is specified by the Shape-image-threshold property, and the default value is 0

8> Syntax
Shape-margin: <length> | <percentage>
Meaning: Specifies a margin value for Shape-outside, with a default value of 0.
<length>: Using numbers to represent margin values
<percentage>: Margin value expressed as a percentage of the element block container

　　Browser compatibility issues : compatibility is not good, use polyfill resolution .

3.CSS3 Mixed Mode detailed

CSS3 Blending mode (CSS blend Modes) is a new magical feature of CSS3 that allows multiple backgrounds or multiple elements to be blended, similar to Photoshop's layer blending modes.

1> Syntax
Background-blend-mode: <blend-mode>
Meaning: Sets the blending mode between the multi-backgrounds, background-color, back-image, and gradient-background.
<blend-mode> can accept 16 values, respectively: normal | Multiply | Screen | Overlay | Darken | Lighten | Color-dodge |color-burn | Hard-light | Soft-light | Difference | Exclusion | Hue | Saturation | Color | luminosity, etc.

2> Syntax
　　Mix-blend-mode:<blend-mode>
Meaning: Sets the blending mode between multiple elements. Can be between HTML elements, HTML, and SVG elements.

3> syntax
Isolation:auto | Isolate
Meaning: Sets the isolation mode of the element.

4.CSS3 Clipping and mask parsing

CSS3 clipping and masking (Clipping and masking) are used to hide part of an element and show another part, cropping uses a path, and masks use an image to control the display of the element.

1> Syntax
Clip:auto | rect (top, right, bottom, left)
Meaning: Sets the clipping for an absolutely positioned element , the auto value is the default value for the unused property.
The four offset values computed from the upper-left corner of the object (0,0). If auto, this edge is not clipped.

2> Syntax
Clip-path: <clip-source> | [<basic-shape> | | <geometry-box>] | None
Meaning: The element is cropped using the underlying shape or referencing the Clippath element, and the None value is the default value.

3>CSS3 Clipping and mask parsing-referencing SVG-defined <clipPath> element clipping elements

4> Syntax
-webkit-background-clip:text;
meaning: crop the background image with text.
Currently only support WebKit kernel browser, use Polyfill to solve the problem.

5> Syntax
Mask-image:none | <image> | <mask-source>
Meaning: Sets the mask image of the element, the None value is the default value.

6> Syntax
Mask-mode:alpha | luminance | Auto
Meaning: Sets the mode of the mask, auto is the default value.

7> Syntax
Mask-repeat:repeat-x | repeat-y | [Repeat | space | round | no-repeat] {A}
Meaning: Sets the repeating mode of the mask, no-repeat the default value.

8> Syntax
mask-position: <position> [, <position>]*
<position> = [Left | center | right | top | bottom | <percentage> | <length>]
Meaning: Sets the position mode of the mask, center is the default value.

9> Syntax
mask-clip: <geometry-box> | no-clip
<geometry-box> = <shape-box> | Fill | Stroke | View-box
<shape-box> = Margin-box | Border-box | Padding-box | Content-box
Meaning: Sets the affected area of the matte, border-box the default value.

10> Syntax
Mask-origin: <geometry-box>
<geometry-box> = <shape-box> | Fill | Stroke | View-box
<shape-box> = Margin-box | Border-box | Padding-box | Content-box
Meaning: Set the reference origin location when calculating mask-position, Border-box is the default value.

11> Syntax
Mask-composite: <compositing-operator>#
<compositing-operator > = Add | Subtract | Intersect | Exclude
Meaning: Sets how the current matte layer is combined with the layer below. Add, subtract, intersect, exclude Source-over, Source-out, source-in, XOR equivalent to SVG, respectively.

12> Syntax
Mask: <mask-reference> <masking-mode>? | | <position> [/<bg-size>]? | | <repeat-style> | | <geometry-box> | | [<geometry-box> | no-clip] | | <compositing-operator>
Meaning: Sets the composite properties of the mask. A < Geometry-box > value will set both Mask-origin and MASK-LICP if there are two values representing Mask-origin and Mask-clip, respectively.
Mask-repeat, Mask-postion, Mask-clip, Mask-origin, mask-size are not valid for <mask>element

13> Syntax
Mask-border-source:none | <image>
Meaning: Sets the image of the border matte, none is the default value. Similar to Border-image-source.

14> Syntax
mask-border-mode:luminance | Alpha
Meaning: Sets the mode of the border matte, with Alpha as the default value. Similar to Mask-mode.

15> Syntax
Mask-border-slice: [<number> | <percentage>]{1,4} fill?
Meaning: Sets the way the border matte is cut, and 0 is the default value.  Similar to Border-image-slice. This property specifies that the image is separated from the top, right, bottom, and left directions, dividing the image into 4 corners, 4 edges and an intermediate area of 9 parts, and the middle area is always transparent (that is, not populated) unless the keyword fill is added.

16> Syntax
Mask-border-width: [<length> | <percentage> | <number> | Auto]{1,4}
Meaning: Sets the thickness of the border matte, auto is the default value. Similar to Border-image-width.

17> Syntax
mask-border-outset: [<length> | <number>]{1,4}
Meaning: Sets the extension of the border matte, 0 is the default value. Similar to Border-image-outset.

18> Syntax
mask-border-repeat: [Stretch | repeat | round | Space]{1,2}
Meaning: Sets the repeating mode of the border matte, stretch the default value. Similar to Border-image-repeat.

19> Syntax
Mask-border: < ' mask-border-source ' > | | < ' mask-border-slice ' > [/< ' mask-border-width ' > |/< ' mask-border-width ';?/< ' Mask-border-out Set ' >]? | | < ' mask-border-repeat ' >
Meaning: Sets the composite property of the border matte, similar to border-image.

5. Filter Detailed:

The CSS3 filter (CSS3 Filters) is a new magical attribute of CSS3, which adds magical image processing to the elements of the Web page, similar to the filters in Photoshop. Filters can be used to achieve image, background, border blur, color adjustment, syntax and IE filter is very different.

1> Syntax
. filter-element {filter:none | <filter-function-list>}
<filter-function-list> = [<filter-function> | <url>]+<filter-function> = <blur () > | <brightness () > | <contrast () > | <drop-shadow () >| <grayscale () > | Meaning: Sets the filter effect of the element.

CSS3---rendering properties