CSS3 - Border Image

CSS Border image屬性用於將圖像邊框添加到某些元素中。不需要使用任何HTML代碼來調用邊框圖像。邊框圖像的語法示例如下−

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

最常用的值如下所示;

Sr.No.	Value & Description
1	邊界圖像源用於設置圖像路徑
2	邊界圖像切片用於分割邊界圖像
3	邊框圖像寬度用於設置邊框圖像寬度
4	邊框圖像重複用於將邊框圖像設置爲圓形、重複和拉伸

Example

下面的示例演示如何將圖像設置爲元素的邊框。

Live Demo

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

它將產生以下結果&負;