# css 边框效果

# 1.边框内圆角

边框内圆角

查看代码

<div class="box1">边框内圆角</div>

/* 思路如下：为元素设置圆角，外层设置轮廓outline。
    圆角与直角之间的空隙用阴影补齐，阴影的尺寸为圆角半径的一半  */
border-radius: 10px;
background: tan;
outline: 10px solid #655;
box-shadow: 0 0 0 5px #655;

1
2
3
4
5
6

# 2.信封边框

信封边框1

信封边框2

查看代码

<div class="box2-1">信封边框1</div>
<br />
<div class="box2-2">信封边框2</div>

1
2
3

/* 方法一 */
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box, repeating-linear-gradient(
      -45deg,
      red 0,
      red 12.5%,
      transparent 0,
      transparent 25%,
      #58a 0,
      #58a 37.5%,
      transparent 0,
      transparent 50%
    ) 0/5em 5em;
/* 方法一 */
padding: 1em;
border: 1em solid transparent;
border-image: repeating-linear-gradient(
    -45deg,
    red 0,
    red 1em,
    transparent 0,
    transparent 2em,
    #58a 0,
    #58a 3em,
    transparent 0,
    transparent 4em
  ) 16;

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

# 3.蚂蚁线

蚂蚁线

查看代码

<div class="box3">蚂蚁线</div>

@keyframes ants {
  100% {
    background-position: 100%;
  }
}
.box3 {
  width: 200px;
  height: 70px;
  border: 1px solid transparent;
  background: linear-gradient(white, white) padding-box, repeating-linear-gradient(
        -45deg,
        black 0,
        black 25%,
        white 0,
        white 50%
      ) 0/0.6em 0.6em;
  animation: ants 12s linear infinite;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#

# 4.弧边

弧边

查看代码

<div class="box4">弧边</div>

border-radius: 0 0 45% 45%/0 0 35% 35%;

# 5. 鼠标移入下划线动画

这是一个标题这是一个标题这是一个标题

查看代码

<div class="title">
  <span>这是一个标题</span>
</div>

1
2
3

.title span {
  background: linear-gradient(to right, red, red) no-repeat;
  background-position: right bottom;
  background-size: 0 2px;
  transition: background-size 1s;
}
.title span:hover {
  background-position: left bottom;
  background-size: 100% 2px;
  cursor: pointer;
}

1
2
3
4
5
6
7
8
9
10
11

# 6. 倾斜按钮

查看代码 3

<button class="btn">
  <span>倾斜按钮</span>
</button>

1
2
3

.btn {
  width: 100px;
  height: 40px;
  background: #409eff;
  border: none;
  outline: none;
  display: block;
  color: #fff;
  font-size: 18px;
  border-radius: 10px 0;
  position: relative;
  transform: skew(-20deg);
}
.btn::before {
  content: "";
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 0 0, transparent 0 20px, #409eff 21px);
  position: absolute;
  bottom: 0;
  left: -19px;
}
.btn::after {
  content: "";
  width: 20px;
  height: 20px;
  background: radial-gradient(
    circle at 100% 100%,
    transparent 0 20px,
    #409eff 21px
  );
  position: absolute;
  top: 0;
  right: -19px;
}

.btn span {
  display: block;
  transform: skew(20deg);
}

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

# 7. 弧形边框

选项1

选项2