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

In this article Xiaobian for you to introduce in detail the "Css background and gradient attributes are", detailed content, clear steps, details handled properly, I hope that this "Css background and gradient attributes what" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

1. Background drawing area

Background-clip

Set the background display area

Attribute: background-clip

Value: border-box: the background is cropped to the border, default

Padding-box: the background is trimmed to the inner margin box (ignore the inside margin)

Content-box: the background is trimmed to the content box (only the content area is displayed)

two。 Location area of the background

Where does the background start?

Attribute: background-origin

Value: border-box: draw from the border

Padding-box: start drawing from the inside margin

Content-box: start drawing on the content area

3. Background merging

Attribute: background:

Background:color url () repeat attachment position

Common methods:

Background:url repeat position

Background:url (images/1.jpg) no-repeat-15px 20px

Background-image:url ()

Background-repeat:no-repeat

Background-position:-15px 20px

Background:red

Background:url (1.jpg)

Gradual change

Smooth transition between multiple color values

Gradient classification:

1. Linear gradient

2. Radial gradient

3. Repeat the gradient

Note:

All gradients are set through background-image

Linear gradient: linear-gradient

Radial gradient: radial-gradient

Repetitive linearity: repeating-linear-gradient

Repeat Radial: repeating-radial-gradient

Background-image:linear-gradient ()

1. Linear gradient

Linear-gradient (angle,color-point1,color-point2,...)

Angle:

Value range: to top, to bottom, to right

Angle: 0deg-- > to top

90deg-- > to right

180deg-- > to bottom

Color-point: the start point, middle transition point, and end point of the gradient color

The range of values are:

Red 0%: red from the beginning

Green 50%: turn green at 50% position

Blue 100%: turn blue at the end

2. Radial gradient

Radial-gradient ([size at position,] color-point1,color-point2,....)

Size at position:size is the radius of the radiating circle position is the coordinate of the origin.

Left top bottom right center

3. Repeat the gradient

Background-image:repeating-linear-gradient (to bottom,red 0m green 10px)

4. Browser compatibility

For unsupported versions, through the prefix

Firefox:-moz-

Chrome,Safar:-webkit-

Opera:-o-

Background-image:-webkit-linear-gradient (to bottom,red,green); Chrome Safari

Background-image:-o-linear-gradient (to bottom,red,green); Opera

Background-image:-moz-linear-gradient (to bottom,red,green); Firefox

After reading this, the article "what are the Css background and gradient attributes" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

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.