CSS 图像边框

CSS border-image属性

CSS border-image属性允许您指定要使用的图像，而不是元素周围的普通边框。该属性有三个部分：

用作边框的图像
在哪里切片图像
定义是否应重复或拉伸中间部分

我们将使用以下图像（称为“border.png”）：

注意：为了使border-image工作，元素还需要border属性集！在这里，重复图像的中间部分以创建边框：

#borderimg {
     border: 10px solid transparent;
     padding: 15px;
     border-image: url(border.png) 30 round;
   }

尝试一下

在这里，图像的中间部分被拉伸以创建边框：

#borderimg {
     border: 10px solid transparent;
     padding: 15px;
     border-image: url(border.png) 30 stretch;
   }

尝试一下

提示：border-image属性实际上是border-image-source，border-image-slice，border-image-width， border-image-outset和border-image-repeat属性的缩写属性。

CSS border-image - 不同的切片值

不同的切片值会完全改变边框的外观：

#borderimg1 {
   border: 10px solid transparent;
   padding: 15px;
   border-image: url(border.png) 50 round;
 }

 #borderimg2 {
   border: 10px solid transparent;
   padding: 15px;
   border-image: url(border.png) 20% round;
 }

 #borderimg3 {
   border: 10px solid transparent;
   padding: 15px;
   border-image: url(border.png) 30% round;
 }

尝试一下

CSS border-images属性

属性	描述
border-image	用于设置所有border-image-*属性的简写属性
border-image-source	指定要用作边框的图像的路径
border-image-slice	指定如何分割边界图像
border-image-width	指定边框图像的宽度
border-image-outset	指定边框图像区域超出边框框的扩展量
border-image-repeat	指定边框图像是否应该重复、圆角或拉伸

CSS border-image属性

CSS border-image - 不同的切片值

CSS border-images属性

相关页面