About the usage of css3 image border border-image

Among the many new features introduced in CSS3, this article mainly introduces the usage of css3 image border border-image, which has certain reference value. Those who are interested can learn about it

For the CSS attribute border , I believe all WEB developers are very familiar with it. We can set the width, color, and style of the border of the HTML element to make the HTML element show different borders, such as double lines, dotted lines, and dotted lines. But no matter how you set it up, these are some pretty primitive practices. Starting from CSS3, we have a new property: border-image , which allows you to surround HTML elements with beautiful little images, appearing as image borders. With the border-image property, we can create very beautiful border styles.

Among the many new features introduced in CSS3, such as the new input type in HTML5, Chinese font (web font), placeholder, etc., they are very practical and popular, and we have also cited a very beautiful one before Examples of border-image, but there are still very few border-image images on the Internet. I think it is mainly because Google Chrome and Firefox have supported them for a long time, and IE11 only supports this syntax.

The syntax of border-image

<&#39;border-image-source&#39;> || <&#39;border-image-slice&#39;> [ / <&#39;border-image-width&#39;> | / <&#39;border-image-width&#39;>? / <&#39;border-image-outset&#39;> ]? || <&#39;border-image-repeat&#39;>

These syntax descriptions seem very boring. Everyone likes to see examples. This is the best way to It’s easy to understand, let’s give a few examples below.

Image border border-image Usage 1: Cyclic tiling of the border image (repeat)

In this case, the border image images will be tiled and filled in sequence border area.

<p id="repeat">图片将会循环贴满边框区域</p>

#repeat { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}

##Instance Demonstration 1:

Picture border border-image Usage 2: Adaptive circular tiling of border images (round)

You may have seen that although the picture border above is very beautiful, there is a flaw, that is, when the element width Or when the height is not an integer multiple of the frame image, the last/first image cannot be fully displayed and will be partially obscured, which looks very unsightly. The designers of CSS3 have already considered this problem, and using the round attribute value can avoid this situation. The function of round is to slightly adjust the border image to ensure that each picture can be displayed, which increases the viewing quality.

<p id="round">图片将会贴满边框区域</p>

#round { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 round;
}

##Example Demonstration 2

Image border border-image usage three: border image stretching and tiling (stretch)

'stretch' is stretching, stretching the small picture to fill the border area, and it does not loop, obviously , so the frame image will be deformed.

<p id="stretch">图片将会拉伸贴满边框区域.</p>

#stretch { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;
}

Example Demonstration 3

Obviously,

border-image

The first usage should be uncommon, because sometimes it will cause the border to feel incomplete. The second and third usages have their own merits and have different beauties. The border image used here is actually very simple. Exquisite art can create more beautiful border images and produce amazing effects, such as the example in the previous article, which I will show you again below. The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Use the border-radius of CSS3 to draw Tai Chi and love patterns

##@keyframes in CSS3 Realization of animation

About the method of responsive centered display of CSS banner image

The above is the detailed content of About the usage of css3 image border border-image. For more information, please follow other related articles on the PHP Chinese website!