CSS3：border-image

DOCTYPE html>
html>

head>
  meta charset="utf-8">
head>

body>
  p>原始图片p>
  img src="./images/border1.png" alt="">
  p>一、p>
  p>border: 27px solid transparent;p>
  p>border-image-source: url(./images/border1.png);p>
  div class="border-image1">div>

  p>二、p>
  p>border: 27px solid transparent;p>
  p>border-image-source: url(./images/border1.png);p>
  p>border-image-slice: 27 27 27 27;p>
  p>border-image-repeat: stretch;（图像边界默认拉伸）p>
  div class="border-image2">div>

  p>三、p>
  p>border: 27px solid transparent;p>
  p>border-image-source: url(./images/border1.png);p>
  p>border-image-slice: 27;p>
  p>border-image-repeat: repeat;（图像边界重复）p>
  div class="border-image3">div>

  p>四、p>
  p>border: 27px solid transparent;p>
  p>border-image-source: url(./images/border1.png);p>
  p>border-image-slice: 27;p>
  p>border-image-repeat: round;（图像边界铺满）p>
  div class="border-image4">div>

  p>五、p>
  p>border: 10px solid transparent;p>
  p>border-image: url(./images/border1.png) 27 round;p>
  div class="border-image5">div>
  p>原始图片p>
  img src="./images/border2.png" alt="">

  p>六、p>
  div>border: 64px solid transparent;div>
  div> border-image-source: url(./images/border2.png);div>
  div>border-image-slice: 64;div>
  div class="border-image6">div>

  p>七、相比于background-image，优势在于等比缩放时可以保证四个角的宽度不变p>
  div>border: 64px solid transparent;div>
  div> border-image-source: url(./images/border2.png);div>
  div>border-image-slice: 64 fill;（fill保留图像的中间部分）div>
  div class="border-image7">div>
  p>八、p>
  div>background-image: url(./images/border2.png);div>
  div>background-size: 100% 100%;div>
  div class="border-image8">div>
body>

html>

style>
  * {
    box-sizing: border-box;
  }

  .border-image1 {
    width: 300px;
    height: 150px;
    border: 27px solid transparent;
    border-image-source: url(./images/border1.png);
  }

  .border-image2 {
    width: 300px;
    height: 150px;
    border: 27px solid transparent;
    border-image-source: url(./images/border1.png);
    border-image-slice: 27 27 27 27;
  }

  .border-image3 {
    width: 300px;
    height: 150px;
    border: 27px solid transparent;
    border-image-source: url(./images/border1.png);
    border-image-slice: 27;
    border-image-repeat: repeat;
  }

  .border-image4 {
    width: 300px;
    height: 150px;
    border: 27px solid tran服务器托管sparent;
    border-image-source: url(./images/border1.png);
    border-image-slice: 27;
    border-image-repeat: round;
  }

  .border-image5 {
    width: 300px;
    height: 150px;
    border: 10px solid transparent;
    border-image: url(./images/border1.png) 27 round;
  }

  .border-image6 {
    width: 468px;
    height: 232px;
    border: 64px solid transparent;
    border-image-source: url(./images/border2.png);
    border-image-slice: 64;
  }

  .border-image7 {
    width: 468px;
    height: 232px;
    border: 64px solid transparent;
    border-image-source: url(./images/border2.png);
    border-image-s服务器托管lice: 64 fill;
  }

  .border-image8 {
    width: 468px;
    height: 232px;
    background-image: url(./images/border2.png);
    background-size: 100% 100%;
  }
style>

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 免注册，ChatGPT可即时访问了！

AI又有啥进展？一起看看吧 Apple进军个人家用机器人 Apple在放弃自动驾驶汽车项目并推出混合现实头显后，正在进军个人机器人领域，处于开发家用环境机器人的早期阶段 报告中提到了两种可能的机器人设计。一种是移动机器人，可以跟随用户在房子里四处走动。另一种是…