CSS边框图像重复

CSS border-image-repeat

CSS border-image-repeat属性用于将边框图像设置为圆形,重复和拉伸。

实时演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
 <head>
   <style>
    #borderimg1 {
      border: 15px solid transparent;
      padding: 15px;
      border-image-source: url(https://tutorialspoint.com/css/images/border.png);
      border-image-repeat: round;
      border-image-slice: 50;
      border-image-width: 10px;
    }
   </style>
 </head>
 <body>
   <p id ="borderimg1">This is image border example.
</p>
 </body>
</html>