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

This article will explain in detail what are the background attributes and border-related attributes in css3. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

1 New properties related to background

Background-clip: specifies the display range of the background.

Background-origin: specifies the starting point when drawing the background image.

Background-size: specifies the size of the image in the background.

Background-break: specifies how to loop when the background image of an inline element is tiled.

Note:

Firefox browser: supports three other attributes except the background-size attribute, which needs to be preceded by the "- moz-" text. Write "- moz-background-inline-policy" when using background-break.

Safari, GoogleChorme, Opera: supports three other attributes except background-break. You need to add the text ""-webkit- "before the attribute.

2 specify the display range of the background-background-clip property

(1) the display range of the background

CSS2: the display range of the background refers to the range within the internal padding, excluding the border.

CSS2.1 and even CSS3: the display range of the background refers to the range including the border.

(2) attribute value

Border: the background range includes the border area.

Padding: the background range does not include the border area.

Div.div1 {

-moz-background-clip:border

-webkit-background-clip:border

}

Div.div2 {

-moz-background-clip:padding

-webkit-background-clip:padding

}

3 specify the starting point when drawing the background image-background-origin attribute

(1) when drawing the background image, the default is to start from the upper left corner of the content filling area.

(2) value

Border: drawing from the upper left corner of the border

Padding: draw from the upper left corner of the content padding area

Content: drawing from the upper left corner of the content

(3) different browsers

Firefox: "- moz-background-origin"

Safari, Chorme: "- webkit-background-origin"

(4) although the image between the dots and dots in the border dotted line will not be displayed when the background-clip attribute is specified as padding, you can still specify that the drawing starts from the upper left corner of the border by specifying the background-origin attribute as border.

4 specify the size of the image in the background-background-size attribute

(1) method of use

Background-size: width and height of the image element

(2) the browser supports:

So far: Safari3, Chrome8, Firefox4, Opera10 browsers support this attribute.

(3) if you want to maintain the aspect ratio of the image, you can set another parameter to auto when setting the width and height of the image.

(4) specify only one parameter

The browser treats this value as a width value and auto as a height value.

(5) use the value of percentage as a parameter

The specified percentage is treated in the browser as the percentage obtained by dividing the image size by the size of the entire border area.

(6) contain keyword as a parameter

This will automatically square or shrink the original image while maintaining the aspect ratio, so that the width or height of the original image is exactly equal to the width or height of the element (ensure that the image can be fully displayed in the element)

(7) cover keyword as a parameter

This will make the original image automatically scale the background image to the inside of the filling element while maintaining the aspect ratio. If the aspect ratio of the element is not consistent with that of the original image, then the excess part will be cut off.

5 added options for tiling background images-space and round

(1) space

When tiling the background image horizontally or vertically, it does not cut out the part of the image beyond the background, nor adjusts the size of the background image, but automatically adjusts the distance between the image and the image.

(2) round

Tiling the background image horizontally or vertically does not cut out the part of the image beyond the background, but automatically adjusts the size of the background image.

(3) browser support

So far: IE9 or above, Chrome, Opera browsers support this attribute.

Div {

Background-repeat:space;//round

}

6 display multiple background images in one element

In CSS3, multiple background pictures can be displayed in one element, and multiple background pictures can be displayed overlapping, making it easier to adjust the material used in the background image.

Div {

Background-image:url (flowe-red.png), url (flower-green.png), url (sky.png)

Background-repeat:no-repeat,repeat-x,no-repeat

Background-position:3%98%,85%,centercenter,top

}

(1) when using the background-image attribute to specify an image file, the specified time is specified from top to bottom according to the order in which the images are stacked when displayed in the browser, the first image file is placed on the top, and the last specified file is placed on the bottom.

(2) through the assignment of multiple background-repeat attributes and background-position attributes, you can specify the tiling mode and placement position of an image file in the background image separately.

(3) the attributes that allow multiple assignments to be used in conjunction with multiple image files are as follows:

Background-image 、 background-repeat 、 background-position 、 background-size 、 background-clip 、 background-origin .

7 use a gradient background

In CSS3, it is supported to specify a gradient background for elements. A gradient is a slow transition from one color to another. The gradient is divided into linear gradient and radioactive gradient.

Draw a linear gradient

Background:linear-gradient (tobottom,orange,black)

Use the linear-gradient function to achieve a linear gradient, with three parameters in the function.

(1) the first parameter value:

Tobottom: specifies the gradient from top to bottom. The default starting point of the gradient is the top of the element, and the focus of the gradient is the bottom of the element.

Tobottomright: specifies the gradient from top left to bottom right. The default starting point of the gradient is the upper left corner of the element, and the end point of the gradient is the lower right corner of the element.

Toright: specifies the gradient from left to right. The default starting point of the gradient is the left side of the element, and the focus of the gradient is on the right side of the element.

Toupright: specifies the gradient from the bottom left to the upper right. The default starting point of the gradient is the lower left corner of the element, and the end point of the gradient is the upper right corner of the element.

Toup: specifies the gradient from bottom to top. The default starting point of the gradient is the bottom of the element, and the end of the gradient is the top of the element.

Toupleft: specifies the gradient from the bottom right to the upper left. The default starting point of the gradient is the lower right corner of the element, and the end point of the gradient is the upper left corner of the element.

Toleft: specifies the gradient from right to left. The default starting point of the gradient is the right of the element, and the end of the gradient is the original left.

Tobottomleft: specifies the gradient from top right to bottom left. The default starting point of the gradient is the upper right corner of the element, and the end point of the gradient is the lower left corner of the element.

You can specify an angle to specify the rotation angle of the gradient

(2) the second parameter value represents the starting point of the gradient, and the third parameter represents the final color of the gradient.

Div {

Width:300px

Height:300px

Background:linear-gradient (tobottom,orange,black) / / Linear gradient from top to bottom, from orange to black

}

(3) specify the first parameter as an angle, which is used to modify the angle of the gradient.

Background:linear-gradient (30 degre orangeje black)

If the angle is 0, the direction of the gradient is from the bottom up, and as the angle increases, the gradient rotates clockwise.

(4) the deviation from the start or end of the gradient can be specified after the starting or ending color (the default values are 0% and 100% respectively when not specified)

Background:linear-gradient (tobottom,orange20%,black70%)

It means that the gradient starts from the top of the p element down 20%, that is, from the top 300 (element height) * 20%'60 pixels to 30% from the bottom of the element (100% ran 70%), that is, the gradient stops at 300'30%'90 pixels from the bottom of the element.

(5) you can add the middle point of multiple gradients.

Background:linear-gradient (tobottom,orange0%,red25%,yellow50%,green75%,black100%)

Draw a radioactive gradient

Background:radial-gradient (orange,black)

Use the radial-gradient function to realize the radioactive gradient, which uses two parameters, namely the gradient starting point color and the gradient end color.

Div {

Background:radial-gradient (orange,black); / / spread outward from the center, from orange to black radioactive gradient

}

(1) the circle keyword or ellipse keyword can be used to specify whether the drawing gradient is circular or oval.

Div {

Background:radial-gradient (circle,orange,black); / / specify a circular gradient

}

(2) you can specify the starting position of the gradient through the at keyword.

Background:radial-gradient (

At

Lefttop,orange,black)

The following option values can be specified:

Centercenter: spread outward from the center of the element (default option value)

Lefttop: diffuses outward from the upper left corner of the element

Centertop: spread outward from the top center of the element

Righttop: diffuses outward from the upper right corner of the element

Rightcenter: diffuses outward from the center of the right end of the element

Rightbottom: diffuses outward from the lower right corner of the element

Centerbottom: spread outward from the bottom center of the element

Leftbottom: diffuses outward from the upper left corner of the element

Coordinate values: for example (305.50), spreading outward from the specified coordinate point

Background:radial-gradient (circleatcentertop,orange,black)

Background:radial-gradient (at130px50px,orange,black)

(3) specify the gradient size

Closest-side: can be graded to the edge closest to the start of the gradient.

Farthest-side: can be graded to the edge farthest from the starting point of the gradient.

Closest-corner: can be graded to the corner closest to the start of the gradient.

Farthest-corner: can be graded to the corner farthest from the starting point of the gradient.

Background:radial-gradient (ellipseclosest-sideat130px50px,orange,black)

(4) the gradient size can be specified by specifying the radius of the circular gradient.

Background:radial-gradient (circle95pxat130px50px,orange,black)

(5) the gradient size can be specified by specifying the transverse radius and longitudinal radius of the elliptical gradient.

Background:radial-gradient (ellipse

235px95pxat130px50px.orangerecordblack)

(6) you can add multiple intermediate points between the starting point and the end point of the gradient by adding multiple gradients and specifying the percentage of deviation.

Background:radial-gradient (circle130pxat130px50px,orange0%,red25%,yellow50%,green75%,black)

8 drawing of fillet border

So far: IE, Safari, Firefox, Opera, and Chorme browsers all support this style of drawing rounded borders.

Border-radius attribute

In CSS3, use this property to specify the radius of the fillet to draw the fillet border.

Div {

Border:soild5pxblue

Border-radius:20px

}

(1) specify two radii

In the browser, draw the first radius as the circle radius of the upper left and lower right corner of the border, and the second radius as the circle radius of the upper right and lower left corner of the border

Border-radius:40px20px

(2) when the border is not displayed

In CSS3, if you use the border-radius attribute but set the border to not display, the browser will draw the four corners of the background as rounded corners

Div {

Border:none

Border-radius:20px

}

(3) when changing the type of frame

After using the border-radius property, the border is drawn along the fillet curve, regardless of the type of border.

Div {

Border:dashed5pxblue

Border-radius:20px

}

(4) draw fillet borders with four corners with different radii

Border-top-left-radius attribute: specify the radius of the upper left corner

Border-top-right-radius attribute: specify the radius of the upper right corner

Border-bottom-right-radius attribute: specify the radius of the lower right corner

Border-bottom-left-radius attribute: specify the radius of the lower left corner

Div {

Border:dashed5pxblue

Border-top-left-radius:10px;// specifies the upper left corner radius

Border-top-right-radius:20px;// specifies the radius of the upper right corner

Border-bottom-right-radius:30px;// specifies the radius of the lower right corner

Border-bottom-left-radius:40px;// specifies the radius of the lower left corner

}

9 use image frames

Border-image attribute

A border-image attribute has been added to CSS3, which allows the border whose length or width of the element changes at any time to be drawn using an image file. Using the border-image property, the browser automatically splits the image into 9 parts when displaying the image frame, so that there is no need for the page maker to process it manually. In addition, there is no need to use more elements on the page.

(1) browser support

So far: IE, Safari, Firefox, Opera, and Chorme browsers all support the use of the border-image attribute.

(2) usage

Border-image:url (path to the image file) ABCD (at least 5 parameters must be specified in this attribute)

A, B, C, D: represent the top margin, right margin, bottom margin, and left margin when the browser automatically divides the image used by the border.

Div {

Border:solid5px

Border-image:url (borderimage.png) 18181818

Width:300px

}

(3) use the border-image attribute to specify the border width

In CSS3, in addition to using the border property or the border-width property to specify the width of the border, you can also use the border-image property to specify the width of the border.

Border-image:url (path to the image file) ABCD/border-width

Div {

Border:solid

Border-image:url (borderimage.png) 18181818hand 10px; (specified as the same width)

/ / border-image:url (borderimage.png) 10amp 5px10px15px20px; (the borders of the four sides are specified with different widths)

Width:300px

}

Note: in CSS3, if the four parameters are exactly the same, you can write only one parameter and omit the other three parameters.

(4) specify the display mode of the image in the 4 edges

You can specify in the border-image attribute whether the image on the 4 sides of the element is displayed as stretched or tiled

Border-image:url (path to the image file) ABCD/border-widthtopbottomleftright

Topbottom: indicates how the image in the upper and lower edges of an element is displayed

Leftright: indicates how the image is displayed on the left and right sides of the element

The value of the display method:

Repeat: the image will be tiled

Stretch: the image will be displayed as stretched

Round

Div {

Border-image:url (borderimage.png) 10/5pxrepeatstrerch

Width:300px

Height:200px

}

(5) use background image

When using the border-image property, you can still use the background image normally, but in order not to let the frame image block the background image, you need to use a transparent frame image in the middle, otherwise the background image may be partially or completely blocked by the center of the frame image.

Div {

Background-image:url (bk.png)

Background-repeat:no-repeat

Border-image:url ("borderimage.png") 20202020/5px

Background-origin:border

Border-radius:18px

Width:711px

Height:404px

}

This is the end of the article on "what are the background attributes and border-related attributes in css3". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

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.