How to add image to border in css? css set border image

Today I will introduce to you how to use CSS to add an image to the border of an element. CSS can add an image to the border of an element by setting the border-image attribute or its related attributes. Let’s take a look at the specific content of this article.

A brief introduction to the border-image attribute

In css we can set border-image attribute to define the image to use for the border, instead of using the border-style attribute to give the border style; and use the image as an additional background layer for the element.

Note: border-image attribute is an abbreviation attribute, 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 border on an element, the border-image attribute is set in several steps.

First, use the border-image-slice attribute to cut the image specified in the border-image-source attribute into nine images, namely four corner images, four edge images and one Middle image:

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

Then, follow the following steps to scale, position and splice the nine obtained images into their corresponding boundary image areas:

1. According to Scale the image using the value specified by the border-image-width property.

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

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

Scale diagonal images to fit the specified width on the edge where they belong.

Also, the width of the middle image is scaled by the same factor as the top image, unless that factor is zero or infinity, in which case the bottom scale factor is replaced, if not, the width is not scaled . Scales the height of the middle image by the same factor as the left image unless its height is zero or infinity, in which case the right image's scaling factor is substituted, if not, the height is not scaled.

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

If the first keyword of the border-image-repeat attribute 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 does not change.

If the first keyword is round, the top, middle, and bottom images are resized in width so that the full amount of them fits exactly in the middle of the bounding image area.

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

If the second keyword is stretch, round, repeat, or space, the same scaling is applied to the corresponding left, center, and right images, thereby affecting the height of the images; except for the first step, they are not scaled width.

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

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

If the second keyword is repeat, the left, center and right images are vertically centered in their respective areas. Otherwise, the images are placed at the top edge of the respective portion of the bounding image area.

4. After scaling and positioning the images, tile (repeat) them as many times as necessary to fill their respective areas, based on the value of the border-image-repeat property.

If the value is repeat, the images are repeated to fill as much of their respective areas as possible. If the value is space, any partial tiles are discarded and extra space is allocated before, after, and between tiles.

All images are drawn at the same stacking level as normal borders: 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 border image beyond the border area of ​​the element.

Usage of border-image attribute

Basic syntax:

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;>

Initial: none 100 % / 1 / 0 stretch , which is the concatenation of the initial value of the longhand attribute

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

Instructions:

1. border-image-source: Specify the image to be used for the border

Example:

border-image-source: none; /* 没有边框图像，使用`border-style`定义的边框样式` */
border-image-source: url(path/to/some-image.png);
border-image-source: linear-gradient(to bottom, #333333, #eeeeee); /* 线性渐变的图像 */

2、border-image-slice：用于将要用作边框图像的图像“切片”成九个部分：四个角，四个边和一个中心部。

例如，以下图像已被切成9个部分。顶部，右侧，底部和左侧偏移具有相等的124px值。

border-image-slice：124px;

3、border-image-width：用于缩放border-image-slice值创建的九个部分的边框图像切片。

4、border-image-outset：用于指定边框图像区域扩展到元素边框区域之外的量

5、border-image-repeat：指定用作边界图像的图像的切片如何缩放和平铺（重复）。

css使用border-image属性设置图像边框的示例：

示例一：

需要用到图片：

html代码：

<div class="container">
  <div class="element element-1">
    <p><strong>php完全自学手册</strong></p>
    <p>欢迎朋友们加入php自学的行列，php语言是一门入门简单，容易上手的通用开源脚本语言，《php完全自学手册》能使学习者对php有一个大致的了解，并能通过该语言进行简单的网站和软件开发。</p>
  </div>
</div>

css代码：

.container {
  margin: 40px auto 0;
  width: 90%;
}

.element {
  padding: 30px;
  margin: 30px auto;
}

.element-1 {
  background-color: white;
  /* fallback for browsers that don't support border images */
  border: 10px solid grey;
  -webkit-border-image: url(img/1.png) 20 / 30px / 0 repeat;
  -o-border-image: url(img/1.png) 20 / 30px / 0 repeat;
  border-image: url(img/1.png) 20 / 30px / 0 repeat;
}

效果图：

示例二：

需要用到的图片：

     

HTML代码：

<div class="container">
  <div class="element element-2">
    <p><strong>Bootstrap 中文手册</strong></p>
    <p>《Bootstrap开发手册》是Bootstrap官方最新的在线参考手册。Bootstrap是目前最受欢迎的前端框架，那在本Bootstrap文档中，您将会学习使用Bootstrap快速创建一个响应式（自适应）web项目，此外，由于整个框架是基于模块的，您可以通过您自己的 CSS 位，甚至是项目开始后的一个大整改，来进行自定义。 Bootstrap视频教程：http://www.php.cn/course/list/15.html</p>
  </div>
</div>

css代码：

.element-2 {
  border: double orange 1em;
  -webkit-border-image: url(img/2.png) 27 round stretch;
  -o-border-image: url(img/2.png) 27 round stretch;
  border-image: url(img/2.png) 27 round stretch;
}

效果图：

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

The above is the detailed content of How to add image to border in css? css set border image. For more information, please follow other related articles on the PHP Chinese website!