css：clip元素裁剪实现Loading加载效果边框

clip 属性定义了元素的哪一部分是可见的。clip 属性只适用于 position:absolute 的元素。

警告： 这个属性已被废弃。建议使用 clip-path

文档

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip
• https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

语法

/* 标准语法 */
clip: rect(, , , );

/* 向后兼容语法 */
clip: rect(   );   

/* 默认值。不应用任何剪裁 */
clip: auto;

/* 从父元素继承 clip 属性的值 */
clip: inherit;
1
2
3
4
5
6
7
8
9
10
11

• top 和 bottom 指定相对于盒子上边框边界 的偏移
• right 和 left 指定了相对于盒子左边框边界 的偏移

截取各个边框

实现代码

<style>
  .box-wrap {
    display: flex;
    column-gap: 20px;
  }

  .box {
    position: relative;
    height: 200px;
    width: 200px;

    background-color: green;
    color: #fff;
    font-size: 24px;
    text-align: center;
    line-height: 200px;
  }

  .box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #cd0000;
  }

  .box-top::before {
    /* 上边框 */
    clip: rect(0 200px 2px 0);
  }

  .box-bottom::before {
    /* 下边框 */
    clip: rect(198px, 200px, 200px, 0);
  }

  .box-left::before {
    /* 左边框 */
    clip: rect(0, 2px, 200px, 0);
  }

  .box-right::before {
    /* 右边框 */
    clip: rect(0, 200px, 200px, 198px);
  }
style>

<div class="box-wrap">
  <div class="box">boxdiv>
  <div class="box box-top">box-topdiv>
  <div class="box box-bottom">box-bottomdiv>
  <div class="box box-left">box-leftdiv>
  <div class="box box-right">box-rightdiv>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

实现Loading加载效果边框

实现代码

<style>
 .box {
    position: relative;
    height: 200px;
    width: 200px;

    background-color: green;
    color: #fff;
    font-size: 24px;
    text-align: center;
    line-height: 200px;
  }

  .box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #cd0000;
    animation: borderAround 1.5s infinite linear;
  }

  @keyframes borderAround {
    0%,
    100% {
      clip: rect(0 200px 2px 0);
    }
    25% {
      clip: rect(0, 200px, 200px, 198px);
    }
    50% {
      clip: rect(198px, 200px, 200px, 0);
    }
    75% {
      clip: rect(0, 2px, 200px, 0);
    }
  }
style>

<div class="box">boxdiv>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

演示地址：https://mouday.github.io/front-end-demo/clip-path/loading.html

参考文章

1. CSS实线边框loading动画实例页面

2. CSS3/SVG clip-path路径剪裁遮罩属性简介

3. 菜鸟教程 - CSS clip 属性