使用css设置边框背景图片

时间 2020-08-21

标签使用 css 设置边框背景图片栏目 CSS 繁體版

原文原文链接

使用css的特有属性，给不一样的盒子添加边框图片。
为何会有这一场景呢。由于，UI给咱们前端的边框图片可能未必适合咱们当前的内容。
这里咱们主要使用到的属性有：css

border-image-source
border-image-slice
border-top-width
border-image-repeat

个别属性能够根据本身的我的状况决定是否添加，但愿使用的时候本身甄别。html

切边框图片的顺序:
前端

下面是个人代码案例url

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    ul li {
      list-style: none;
    }

    .box1 {
      width: 300px;
      height: 300px;
      margin: 100px;
      border: 5px solid #000;
      border-image-source: url(./1.png);
      /* 背景图片路径 */
      border-image-slice: 10 20 20 20;
      /* 如何切割图片 */
      border-top-width: 5px;
      /* 图片的宽度是多少 */
      /* border-image-repeat: stretch; 默认是stretch */
      /* border-image-repeat: round; */
      /* round 是环绕 */
    }

    .box2 {
      width: 300px;
      height: 300px;
      margin: 150px;
      border: 5px solid #000;
      border-image: url(./2.png) 40 / 10px;
      /* 顺序为上左下右，若是4个值同样，那么就能够省略写成一个值 ，注意，这里不要加px
      border-image 后面的/ 的意思是我切完图，将图放在多少个像素中的边框中去，
      若是不写，就默认按照上面border中的像素去填充 */
      /* 若是默认不写就是拉伸 stretch */
    }

    .box3 {
      width: 300px;
      height: 300px;
      margin: 250px;
      /* background-color: hotpink; */
      border: 5px solid #000;
      border-image: url(./3.png) 40 / 10px repeat;
    }
  </style>
</head>

<body>
  <!-- 大盒子 -->
  <div class="box1">
    我是盒子一
  </div>
  <div class="box2">
    我是盒子二
  </div>
  <div class="box3">
    我是盒子三（边框颜色有点浅哦）
  </div>
</body>

</html>

三张边框图片素材，我也上传上来了。仅供参考。
code

代码效果图以下：
htm