Introduction to border-related properties in background properties in CSS3

This article brings the content is about the background attribute in the CSS3 with the border related attributes, there is a certain reference value, the need for friends can refer to, I hope to help you.

1 new properties related to the background

Background-clip: Specifies the display range for the background.

Background-origin: Specifies the starting point when the background image is drawn.

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

Background-break: Specifies how the background image of an inline element is cycled when it is tiled.

Attention:

Firefox browser: Supports three attributes other than the Background-size property, you need to precede the attribute with "-moz-" text. You need to write "-moz-background-inline-policy" when using Background-break.

Safari, Google Chorme, Opera: Support for three attributes other than Background-break, you need to add "" "-webkit-" text before the attribute.

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

(1) Display range of the background

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

CSS2.1 and even CSS3: The display range of the background refers to the range including the bounding rectangle .

(2) attribute value

Border: The background range includes the bounding area.

padding: The background range does not include the bounding area.

div.div1{          -moz-background-clip:border;         -webkit-background-clip:border;} div.div2{          -moz-background-clip:padding;         -webkit-background-clip:padding;}

3 Specifies the starting point of the-background-origin property when drawing the background image

(1) When drawing a background image, the default is drawn from the upper-left corner of the content filler area.

(2) value

Border: Draw from top left corner of border

padding: Drawing from the upper left corner of the content filler area

Content: Drawing from the upper-left corner of the content

(3) different browser

Firefox: "-moz-background-origin";

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

(4) Although the Background-clip attribute is specified as padding, the image between the midpoint of the border dot and the point is not displayed, but you can still specify the drawing from the upper-left corner of the border by specifying the Background-origin property as the border method.

4 Specifies the size of the image in the background-background-size property

(1) How to use

Background-size: Width height of the image element;

(2) Browser support:

So far: Safari3, Chrome8, FIREFOX4, Opera10 browsers support this property.

(3) If you want to maintain the image aspect ratio , you can set the image width and height, set another parameter to auto

(4) specify only one parameter

The value is used as the width value in the browser, and auto is processed as a height value.

(5) Use a percentage value as a parameter

Treats the percentage specified in the browser as a percentage of the image size divided by the size of the entire bounding area

(6)contain keyword as parameter

This will automatically size or shrink the original image to maintain the aspect ratio so that the width or height of the original image is exactly equal to the width or height of the element (ensuring that the image is fully displayed in the element)

(7)cover keyword as parameter

This causes the original image to automatically scale the background image to fill The interior of the element while maintaining the aspect ratio , and if the element's length-to-width ratio does not match the length-to-width ratio of the original image, the excess is clipped .

5 new options for tiling background images----space and round

(1) Space

Tiling the background image horizontally or vertically does not cut out the part of the image that is out of the background, and does not adjust the background image size, but automatically adjusts the spacing between the image and the image .

(2) Round

Tiling a 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 above, Chrome, opera browser support this property.

div{     Background-repeat:space;//round}

6 displaying multiple background images in one element

Multiple background images can be displayed in one element in CSS3, and multiple background images can be overlapped, making it easier to adjust the footage 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%,center center,top;}

(1) When using the Background-image property to specify an image file, the specified time is specified in the order that the image is stacked in the browser when it is displayed, the first image file is placed on top, and the last specified file is placed at the bottom.

(2) by specifying multiple background-repeat properties and the Background-position property, you can specify the tiling and placement of an image file in the background image individually.

(3) The following attributes are allowed to be used in conjunction with multiple image files:

Background-image, Background-repeat, Background-position, Background-size, Background-clip, Background-origin.

7 using the gradient color background

CSS3, the gradient background is supported for the element specified. The so-called gradient is a gradual transition from one color to another. Gradients are divided into linear and radioactive gradients.

Draw a linear gradient

Background:linear-gradient (to Bottom,orange,black)

Use the Linear-gradient function to implement a linear gradient using three parameters in the function.

(1) The first value of the parameter:

To bottom: Specifies a gradient from top to bottom, with the default gradient starting at the top of the element and the gradient focusing on the end of the element.

To bottom right: Specifies the gradient from top left to bottom, with the default gradient starting at the top left corner of the element and the gradient ending at the bottom right corner of the element.

To right: Specifies the gradient from left to bottom , with the default gradient starting at the left of the element and the gradient focusing on the right side of the element.

To the right: Specifies the gradient from bottom left to top, with the default gradient starting at the lower left corner of the element and the gradient ending at the top right corner of the element.

To up: Specifies a gradient from bottom to top, with the default gradient starting at the bottom of the element and the end of the gradient as the element.

To the left: Specifies the gradient from the bottom right to the top-right, with the default gradient starting at the lower-left corner of the element and the gradient ending at the top-upper corner of the element.

To left: Specifies a right-to- left gradient with the default gradient beginning to the right of the element and the end of the gradient to the left.

To bottom left: Specifies a gradient from top to bottom, with the default gradient starting at the upper-right corner of the element and the gradient ending at the lower-left corner of the element.

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

(2) The second parameter value represents the start color of the gradient, and the third parameter represents the end color of the gradient.

div{    width:300px;    height:300px;    background:linear-gradient (to Bottom,orange,black)//from the top to the end, Linear gradient from Orange to black}

(3) Specify the first parameter as an angle , which is the effect of modifying the angle of the gradient line

Background:linear-gradient (30deg,orange,black);

If the angle is 0, the gradient line is oriented from bottom to top, and the gradient line rotates clockwise when the angle is increased.

(4) You can specify the offset from the start of the gradient or the end of the gradient from the start or finish color (default values are 0% and 100%, respectively, when not specified)

Background:linear-gradient (to Bottom,orange 20%,black 70%);

Represents a 20% from the top of the P element, that is, from the top 300 (element height) of the element, beginning the gradient at *20%=60 pixels until the bottom of the element is 30% (100%-70%), which stops the gradient at 300*30%=90 pixels from the bottom of the element.

(5) You can add intermediate points for multiple gradients

Background:linear-gradient (to Bottom,orange 0%,red 25%,yellow 50%,green 75%,black 100%);

Draw a radioactive gradient

Background:radial-gradient (Orange,black);

Using the Radial-gradient function to achieve a radioactive gradient, the function uses two parameters, the gradient start color and the gradient end color, respectively.

div{     background:radial-gradient (orange,black);//spread from the center outward, from orange to black radioactive gradient;}

(1) The circle keyword or the ellipse keyword can be used to specify whether the drawing gradient is rounded outwards or is an elliptical , outward-diffused way.

div{     background:radial-gradient (circle,orange,black);//Specify circular gradient mode}

(2) You can specify the start position of the gradient by using the at keyword

Background:radial-gradient (at the left Top,orange,black);

You can specify the following option values:

Center Center: diffuses Outward from the center point of the element (default option value)

Left top: Spreads outward from the upper -right corner of the element

Center top: diffuses from the top of the element to the center

Right top: Spreads outwards from the upper -left corner of the element

Right Center: Spreads from the center of the element

Right bottom: spreads outward from the lower-left corner of the element

Center bottom: From the bottom of the element to the center outward diffusion

Left bottom: spreads outward from the upper -right corner of the element

coordinate value : for example (30,50), spreading outward from the specified coordinate point

Background:radial-gradient (circle at center Top,orange,black) background:radial-gradient (at 130px 50px,orange, Black);

(3) Specify the gradient size

Closest-side: Can be graduated to the nearest edge from the beginning of the gradient.

Farthest-side: You can ramp to the farthest edge from the beginning of the gradient.

Closest-corner: You can ramp to the nearest corner from the beginning of the gradient.

Farthest-corner: You can ramp to the farthest corner from the beginning of the gradient.

Background:radial-gradient (Ellipse closest-side at 130px 50px,orange,black);

(4) You can specify a gradient size by specifying a radius for a circular gradient

Background:radial-gradient (Circle 95px at 130px 50px,orange,black);

(5) You can specify the gradient size by specifying the transverse radius and the longitudinal radius of the elliptical gradient

Background:radial-gradient (Ellipse 235px 95px at 130px 50px,orange,black);

(6) Add multiple gradient intermediate points at the beginning of the gradient and the gradient end by adding multiple gradients and specifying a deviation percentage

Background:radial-gradient (Circle 130px at130px 50px,orange 0%,red 25%,yellow 50%,green 75%,black);

8 Drawing of rounded borders

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

Border-radius Property

In CSS3, you can use this property to specify a radius of rounded corners to draw rounded borders.

div{   border:soild 5px blue;    border-radius:20px;}

(1) Specify two radius

In the browser, the first radius is drawn as the upper-left corner of the bounding rectangle and the radius of the lower-right corner of the circle, and the second radius is drawn as the circle radius of the upper-right corner and lower-left corner of the bounding rectangle

border-radius:40px 20px;

(2) When the border is not displayed

In CSS3, if you use the Border-radius property but set the border to not display, the browser will draw the 4 corners of the background as rounded corners.

div{border:none;border-radius:20px;}

(3) When changing the frame type

With the Border-radius property, the border is drawn along the fillet curve, regardless of the kind of border.

Div{border:dashed 5px blue;border-radius:20px;}

(4) Draw a rounded border of four angles with different radii

Border-top-left-radius Property: Specifies the upper-left corner radius

Border-top-right-radius property: Specify the upper right corner radius

Border-bottom-right-radius Property: Specifies the lower-right corner radius

Border-bottom-left-radius Property: Specifies the lower-left corner radius

div{border:dashed 5px blue;border-top-left-radius:10px;//Specify the upper-left corner radius border-top-right-radius:20px;// Specify the upper-right corner radius border-bottom-right-radius:30px;//Specify the lower-right corner radius border-bottom-left-radius:40px;//Specify the lower-left corner radius}

9 Using image borders

Border-image Property

A border-image attribute is added to the CSS3, which allows the length or width of the element to be drawn uniformly using an image file. Using the Border-image property allows the browser to automatically divide the image used into 9 parts when displaying the image border, so that the page creator does not have to be manually processed. In addition, there is no need to use more elements in the page.

(1) Browser support

So far: IE, Safari, Firefox, Opera, chorme browsers all support the use of border-image properties.

(2) How to use

Border-image:url (path to image file) A B C D (at least 5 parameters must be specified in this attribute)

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

Div{border:solid 5px;border-image:url (Borderimage.png) 18;width:300px;}

(3) Use the Border-image property to specify the border width

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

Border-image:url (path to image file) A B C d/border-width

Div{border:solid;border-image:url (Borderimage.png) 18/10px; (Specified as width)//border-image:url (borderimage.png) 10 /5px 10px 15px 20px; (four edge border specified as different width) width:300px;}

Note: In CSS3, if 4 parameters are identical, you can write only one parameter and omit the other three parameters.

(4) Specify how images are displayed in 4 edges

You can specify in the Border-image property whether the image in the 4 edge of the element is displayed in an extruded manner, or as a tiled display,

Border-image:url (path to image file) A B C d/border-width topbottom leftright

Topbottom: Represents how an image is displayed in both upper and lower edges of an element

LeftRight: Represents how an image is displayed in the left and right two edges of an element

Value of display mode:

Repeat: The image will be displayed in a tiled manner

Stretch: The image will be displayed in an extruded manner

Round

Div{border-image:url (borderimage.png) 10/5px repeat strerch;width:300px;height:200px;}

(5) using a background image

When using the Border-image property, the background image can still be used normally, but in order to keep the border image from blocking the background image, it is necessary to use the transparent border image, otherwise the background image may be blocked by the center of the border image or the whole.

Div{background-image:url (Bk.png), Background-repeat:no-repeat;border-image:url ("Borderimage.png"), 20/5px; background-origin:border;border-radius:18px;width:711px;height:404px;}