关注我们

CSS3 - boarder-image属性

CSS Border image属性用于向某些元素添加图像边界。边界图像的示例语法如下-

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

最常用的值如下所示-

Sr.No.	Value & Remark
1	border-image-source 用于设置图像路径无涯教程网
2	border-image-slice 用于切片边框图像
3	border-image-width 用于设置边框图像宽度
4	borer-image-repeat 用于将边框图像设置为圆形(rounded)，重复(repeated)和拉伸(stretched)

Border Images示例

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

复制代码

<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>

它将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

徐昊 · TDD项目实战70讲 -〔徐昊〕

B端体验设计入门课 -〔林远宏（汤圆）〕

好记忆不如烂笔头。留下您的足迹吧 :)