CSS border-image 属性-之路教程

语法

border-image: source slice width outset repeat | initial | inherit;

边框图像属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/bg.jpg) round;
        border-image-slice: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border">border-image: 10% round;</p>
    <p>Here is the oroirnal image used:</p>
    <img src="/bg.jpg" style="width:50%">
  </body>
</html>

具有多个值的 border-image 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/bg.jpg) round;
        border-image-slice: 30%;
        border-image-repeat: repeat;
        border-image-width: 15px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/bg.jpg) round;
        border-image-slice: 20%;
        border-image-repeat: round;
        border-image-width: 10px;
      }
      .border3 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/bg.jpg) round;
        border-image-slice: 15%;
        border-image-repeat: space;
        border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image example with all values.</h2>
    <p class="border">border-image: 30% 15px repeat</p>
    <p class="border2">border-image: 20% 10px round;</p>
    <p class="border3">border-image: 15% 20px space;</p>
    <p>Here is the oroirnal image used:</p>
    <img src="/bg.jpg" style="width:50%">
  </body>
</html>

CSS border-image 属性

简写 border-image 属性允许将图像指定为元素周围的边框。

border-image 属性是 CSS3 属性之一。

在其他边框图像属性的帮助下，指定了此属性。
省略的值设置为其默认值。
请参阅有关每个值的一些说明：

border-image-source - 如果值为“none”，或者无法显示图像，则将使用边框样式。
border-image-slice - 图像的中间部分被视为完全透明，除非设置了“fill”值。
border-image-width - 如果此属性的值大于元素的边框宽度，则边框图像将超出填充（和/或者内容）边缘。

我们还需要知道可以使用一个、两个、三个或者四个值来指定此属性。

border-image-outset- 也可以使用一个、两个、三个或者四个值来指定。
border-image-repeat - 它可以由两个值指定。

如果省略第二个值，则假定与第一个值相同。当我们只设置一个值时，它会在所有四个边上应用相同的行为，如果我们设置两个值，第一个应用于顶部和底部，第二个应用于左侧和右侧。

初始值	none 100% 1 0 stretch
应用于	所有元素，除了border-collapse 设置为 "collapse"的内部表格元素。。它还适用于::first-letter伪元素。
继承	不可继承
可动画的	不
版本	CSS3.
DOM 语法	object.style.borderImage = "url(border.png) 30 round"

CSS border-image 属性值说明

值	描述
border-image-source	指定用于创建边框图像的源图像。这可以是URL，数据URI，CSS渐变或者内联SVG。
border-image-slice	指定如何将边框图像源指定的图像切片。图像总是切成九个部分：四个角落，四个边缘和中间。
border-image-width	指定边框图像的宽度。
border-image-repeat	指定图像是否为repeated, rounded 或者 stretched。
initial	将属性设置为默认值。
inherit	从其父元素继承属性。

日期：2020-06-02 22:14:24 来源：oir作者：oir

←CSS background 背景属性

CSS border-image-repeat 属性→

语法

边框图像属性的示例：

具有多个值的 border-image 属性示例：

CSS border-image 属性值说明

目录