Border and background of Css3 new features (2), border of css3 New Features Summary

Border and background of Css3 new features (2), border of css3 New Features Summary
I. Striped background

• Use the background function as the linear-gradient function. The value of linear-gradient is as follows:
  • <Angle>: angle, Gradient Direction
  • To left right top bottom
  • Color: Specifies the color.
  • Color-stop: Specifies the starting and ending colors of the gradient.
  • Length: Specifies the position of the start and end colors with the length value. It cannot be a negative value.
  • Percentage: Specify the starting and ending colors by percentage.
  • Syntax format: linear-gradient ([<angle >|to <side-to-corner>],]? <Color-stop> [, <color-stop>] +)
  • Side-to-corner: [left | right] | [top | bottom]
  • Color-stop: <color> [<length >|< percentage>]?
• Sample Code (diagonal stripe ):

background: linear-gradient( 40deg, #fb3 5px, #58a 15px);width: 200px;height: 100px;margin: 0px auto;background-size: 30px 30px;

• When multiple sets of linear-gradient values are added, the preceding values overwrite the following code:

background-image:linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%, #bbb 0)

Note: Information about linear-gradient (45deg, transparent 75%, # bbb 0) will be overwritten by linear-gradient (45deg, # bbb 25%, transparent 0.

• Sample Code:

width: 200px;            height: 200px;            background: #eee;            background-image: linear-gradient(45deg, #bbb 25%, transparent 0),            linear-gradient(45deg, transparent 75%, #bbb 0),            linear-gradient(45deg, #bbb 25%, transparent 0),            linear-gradient(45deg, transparent 75%, #bbb 0);            background-position: 0px 0px, 12.5px 12.5px, 12.5px 12.5px, 25px 25px;            background-size: 25px 25px;

Code explanation:

* One-to-one reference between the image and position. The image implements the image and position for positioning. * each image is a small triangle. The two triangles are spliced into a square and located in the near future. * Note that the rotation angle is clockwise.

• Linear-gradient can also be combined to define an angle, followed by multiple sets of color values.

linear-gradient(45deg, #bbb 25%, transparent 0, \transparent 50%, #bbb 0, transparent 75%, #bbb 0)

• Css can use \ (backslash) for line feed, as shown above
• Irregular stripe
  • This is mainly implemented by using multiple sets of background-size values. The group values are tiled by custom spacing.
  • This rule is most related to the maximum Convention multiples in mathematics. They will repeat the width of the maximum odds. If it looks more random, it is necessary to avoid this rule.
  • Sample Code:

.wrap{            width: 600px;            height: 100px;            background: hsl(20, 40%, 90%);            background-image:                 linear-gradient(90deg,#fb3 10px, transparent 0),                linear-gradient(90deg,#ab4 20px, transparent 0),                linear-gradient(90deg,#655 30px, transparent 0);            background-size: 40px 100%, 60px 100%, 80px 100%;        }        .wrap-thr{            margin-top: 5px;            width: 600px;            height: 100px;            background: hsl(20, 40%, 90%);            background-image:                 linear-gradient(90deg,#fb3 10px, transparent 0);            background-size: 40px 100%;        }        .wrap-one{            margin-top: 5px;            width: 600px;            height: 100px;            background: hsl(20, 40%, 90%);            background-image:linear-gradient(90deg,#ab4 20px, transparent 0);            background-size: 60px 100%;        }        .wrap-two{            margin-top: 5px;            width: 600px;            height: 100px;            background: hsl(20, 40%, 90%);            background-image:linear-gradient(90deg,#655 30px, transparent 0);            background-size: 80px 100%;        }

• Complex border background
• Solution 1 is implemented using border-image. border-image uses the Nine-cell scaling method.
• Solution 2 uses the multi-layer coverage principle of the background to implement multi-layer colored background first, and then add a white background.

.wrap{            width: 200px;            height: 50px;            padding: 1em;            border: 1em solid transparent;            background: linear-gradient(white,white) padding-box,            repeating-linear-gradient(-45deg,red 0, red 12.5%,             \transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;        }        .wrap-one{            margin-top: 5px;            width: 200px;            height: 50px;            padding: 1em;            border: 1em solid transparent;            background:             repeating-linear-gradient(-45deg,            \transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;        }         .wrap-two{            margin-top: 5px;            width: 200px;            height: 50px;            padding: 1em;            border: 1em solid transparent;            background:              repeating-linear-gradient(-45deg, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;        }        .wrap-thr{            margin-top: 5px;            width: 200px;            height: 50px;            padding: 1em;            border: 1em solid transparent;            background:             repeating-linear-gradient(-45deg,transparent 0, red 50%) 0 / 5em 5em;        }