Detailed explanation of usage examples of css3 image border border-image

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

I believe all WEB developers are very familiar with the CSS attribute border. We can set the width, color, and style of the HTML element's border 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 people using image borders border-image on the Internet. I think it is mainly because Google Chrome and Firefox have supported them for a long time, while IE11 only supports them. This kind of syntax.

The syntax of image border border-image

The code is as follows:

<&#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 look very boring. Everyone likes to see examples, which are easiest to understand. Let's take 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;
}

Example demonstration1:

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

You may have seen that although the picture border above is very beautiful, there is a flaw, that is, when the width or height of the element is not an integer multiple of the border image, the last/first picture cannot be completed. The display will be partially blocked, 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

Picture border border-image Usage 3: Border image stretch and tile (stretch)

'stretch' means stretching, which stretches the small picture to fill the border area without looping. Obviously, the border picture 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 lead to The border feels 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 detailed content of Detailed explanation of usage examples of css3 image border border-image. For more information, please follow other related articles on the PHP Chinese website!