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

This article mainly shows you "css how to add images to the frame", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "css how to add images to the frame" this article.

A brief introduction to the border-image attribute

In css, we can define the image to be used by the border by setting the border-image attribute, rather than using the border-style attribute to give the border style; and use the image as an additional background layer for the element.

Note: the border-image property is an abbreviated property, which can be divided into:

Border-image-source attribute, border-image-slice attribute, border-image-width attribute, border-image-outset attribute, and border-image-repeat attribute.

When you want to set an image frame on an element, the border-image property is set in several steps.

First, use the border-image-slice property to cut the image specified in the border-image-source property into nine images, namely, four corner images, four edge images, and an intermediate image:

The frame image is cut into nine images. The size of each image is determined by the value given by the border-image-slice property. They don't have to be equal in size.

Then, the nine images are scaled, positioned and stitched into their corresponding boundary image areas according to the following steps:

1. The image is scaled according to the value specified using the border-image-width property.

The top and bottom edge images are scaled vertically to accommodate the corresponding specified width offset.

The right and lower left corners are scaled vertically to accommodate the corresponding specified right and left width offsets.

Diagonal images are scaled to fit the width specified on the edges to which they belong.

Also, the width of the middle image is scaled by the same factor as the top image, unless the factor is zero or infinite, in which case the scale factor at the bottom is replaced, and if not, the width is not scaled. Unless the height of the intermediate image is zero or infinite, the height of the intermediate image is scaled by the same factor as the left image, in which case the scaling factor of the right image is replaced, and if not, the height is not scaled.

2. Scale the image according to the value specified using the border-image-repeat property.

If the first key of the border-image-repeat property is stretch, the top and bottom edge images and the middle image are stretched to fit the width of the border image area. Their height has not changed.

If the first keyword is round, the top, middle, and bottom images are resized in width so that all of them fit exactly in the middle of the boundary image area.

If the first keyword is repeat or space, the top, middle, and bottom images are no longer scaled, so their height is scaled only from the first step above.

If the second keyword is stretch,round,repeat, or space, the same zoom is applied to the corresponding left, middle, and right images, thus affecting the height of the image; their width is not scaled except for the first step.

3. Now the images are scaled and they are positioned. Positioning the image is also related to the border-image-repeat property.

If the first keyword is repeat, the top, middle, and bottom images are centered horizontally in their respective areas. Otherwise, the image is placed at the left edge of each part of the boundary image area.

If the second keyword is repeat, the left, middle, and right images are centered vertically in their respective regions. Otherwise, the image is placed at the top edge of each part of the boundary image area.

4. After zooming and positioning the images, tile (repeat) them as many times as needed according to the value of the border-image-repeat property to fill their respective areas.

If the value is repeat, repeat the images to fill their respective areas as much as possible. If the value is space, the tiling of any part is discarded and additional space is allocated before, after, and between tiling.

All images are drawn at the same stacking level as the normal boundary: immediately in front of the background layer; therefore, the border image will always be on top of any background image.

We can use the border-image-outset attribute to extend the boundary image beyond the boundary area of the element.

Use of the border-image attribute

Basic syntax:

Border-image: | | [/ | / /]? |

Initial: none100%/1/0stretch, which is the concatenation of the initial values of the longhand property

Applies to all elements, except when the value of the border-collapse attribute of the inner table element is collapse.

Description:

1. Border-image-source: specify the image to be used by the frame

Example:

Border-image-source:none;/* has no border image and uses the border style defined by `border- style` * /

Border-image-source:url (path/to/some-image.png)

Border-image-source:linear-gradient (tobottom,#333333,#eeeeee); / * Linear gradient image * /

2. Border-image-slice: the image to be used as a frame image is "sliced" into nine parts: four corners, four edges, and a center.

For example, the following image has been cut into nine parts. The top, right, bottom and left offsets have equal 124px values.

Border-image-slice:124px

The above is all the content of the article "how to add an image to a frame by css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.