CSS3 - 边框图像（CSS3 - Border Images）

优质

小牛编辑

127浏览

2023-12-01

CSS Border图像属性用于将图像边框添加到某些元素。您不需要使用任何HTML代码来调用边框图像。边框图像的示例语法如下 -

#borderimg {
   border: 10px solid transparent;
   padding: 15px;
}

最常用的值如下所示 -

Sr.No.	价值和描述
1	border-image-source 用于设置图像路径
2	border-image-slice 用于切割边界图像
3	border-image-width 用于设置边框图像宽度
4	border-image-repeat 用于将边框图像设置为圆角，重复和拉伸

例子 (Example)

以下是将图像设置为元素边框的示例。

<html>
   <head>
      <style>
         #borderimg1 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 10px;
         }
         #borderimg2 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 20px;
         }
         #borderimg3 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 30px;
         }
      </style>
   </head>
   <body>
      <p id = "borderimg1">This is image boarder example.</p>
      <p id = "borderimg2">This is image boarder example.</p>
      <p id = "borderimg3">This is image boarder example.</p>
   </body>
</html>