css怎样给边框增加图象？css设置边框图象【html5教程】,css3,边框图像,border-image

本日将和人人引见怎样运用css给元素的边框增加图象，css只假如经由过程设置border-image属性或许其相干属性就能够给元素的边框增加图象。下面我们来看看本篇文章的具体内容。

border-image属性的简朴引见

在css中我们能够经由过程设置border-image属性来定义边框要运用的图象，而不是运用border-style属性给出给边框款式；并把图象作为元素的附加背景层。

注：border-image属性是一个简写属性，它能够分红：

border-image-source属性，border-image-slice属性，border-image-width属性，border-image-outset属性，和border-image-repeat属性。

当要在元素上设置图象边框时，border-image属性将分几个步骤来设置。

起首，运用border-image-slice属性将border-image-source属性中指定的图象切成九个图象，即四个角图象，四个边沿图象和一其中心图象：

边框图象切成九个图象。每一个图象的大小由border-image-slice属性给出的值肯定。它们的大小没必要相称。

然后，依据以下步骤对获得的九幅图象举行缩放、定位和拼接到其对应的边境图象地区中：

1、依据运用border-image-width属性指定的值缩放图象。

顶部和底部边沿图象被垂直缩放以顺应相应的指定宽度偏移。

右边和左下角是垂直缩放的，以顺应相应的指定右边和左边宽度偏移。

对角图象举行缩放以顺应它们所属的边沿上指定的宽度。

而且，中心图象的宽度按与顶部图象雷同的因子缩放，除非该因子是零或无穷大，在这类情况下，底部的比例因子被替代，假如没有，宽度就不被缩放。除非中心图象的高度是零或无穷大，不然用与左图象雷同的因子来缩放中心图象的高度，在这类情况下，替代右图象的缩放因子，假如没有，则不缩放高度。

2、依据运用border-image-repeat属性指定的值来缩放图象。

假如border-image-repeat属性的第一个关键字是stretch，则拉伸顶部和底部边沿图象以及中心图象以顺应边框图象地区的宽度。它们的高度没有变化。

假如第一个关键字是round，则顶部、中部和底部的图象在宽度上被调解大小，以便它们中的悉数数目正好适合于边境图象地区的中部。

假如第一个关键字是repeat或许space，则不再缩放顶部、中部和底部图象，因而它们的高度将仅从上面的第一步缩放。

假如第二关键字是stretch，round，repeat，或space，则对相应的左、中、右图象运用雷同的缩放，从而影响图象的高度；除了第一步，不缩放它们的宽度。

3、如今图象被缩放，它们被定位。定位图象也与border-image-repeat属性有关。

假如第一个关键字是repeat，则顶部，中心和底部图象在其各自的地区中程度居中。不然，图象被安排在边境图象地区的各自部份的左边沿。

假如第二个关键字是repeat，则左，中和右图象在其各自的地区中垂直居中。不然，图象被安排在边境图象地区的各自部份的顶部边沿。

4、在缩放和定位图象以后，依据border-image-repeat属性的值，依据须要将它们平铺（反复）屡次，以添补它们各自的地区。

假如值是repeat，则反复图象以尽量多地添补它们各自的地区。假如值是space，则抛弃任何部份的平铺，而且在平铺之前、以后和之间分派分外的空间。

一切图象都以与一般边境雷同的堆叠级别绘制：紧挨在背景图层的前面；因而，边框图象将一直位于任何背景图象的顶部。

我们能够运用border-image-outset属性将边境图象扩展到元素的边境地区以外。

border-image属性的运用

基础语法：

border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

初始：none 100% / 1 / 0 stretch ,这是longhand属性的初始值的串连

适用于：一切元素，除了当内部表元素的border-collapse属性的值为collapse时。

申明：

1、border-image-source：指定边框要运用的图象

例：

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.ki4.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;
}

效果图：