CSS 属性

CSS border-image 属性允许您添加图像作为元素周围的边框。默认值为none 100% 1 0stretch。

border-image是以下属性的简写属性:

属性值

  • border-image-source: 它指定图像的路径

  • border-image-slice: 指定如何对要设置为边框的图像进行切片。

  • border-image-width: 它指定要设置为边框的图像的宽度。

  • border-image-outset: 它指定边框的宽度边框图像区域超出边框框。

  • border-image-repeat: 指定是否重复图像以填充边框。

  • initial: 它将默认值设置为属性。

  • inherit: 它从父元素继承属性。

适用范围

所有 HTML 元素。

DOM 语法

object.style.borderImage="url(image) 30 round"

    示例

    这里是示例显示了此属性的效果 -

    <html>
<head>
   <style>
   .box {
            border: 10px solid transparent;
            padding: 15px;
            border-image: url(/css/images/border.png) 30 stretch;
        }
   </style>
</head>
<body>
        <div class="box"></div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13