# css 边框效果
# 1.边框内圆角
边框内圆角
查看代码
<div class="box1">边框内圆角</div>
1
/* 思路如下：为元素设置圆角，外层设置轮廓outline。
圆角与直角之间的空隙用阴影补齐，阴影的尺寸为圆角半径的一半 */
border-radius: 10px;
background: tan;
outline: 10px solid #655;
box-shadow: 0 0 0 5px #655;
1
2
3
4
5
6
2
3
4
5
6
# 2.信封边框
信封边框1
信封边框2
查看代码
<div class="box2-1">信封边框1</div>
<br />
<div class="box2-2">信封边框2</div>
1
2
3
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
2
3
4
5
6
7
8
# 3.蚂蚁线
蚂蚁线
查看代码
<div class="box3">蚂蚁线</div>
1
@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
2
3
4
5
6
7
8
9
10
11
12
#
# 4.弧边
弧边
查看代码
<div class="box4">弧边</div>
1
border-radius: 0 0 45% 45%/0 0 35% 35%;
1
# 5. 鼠标移入下划线动画
这是一个标题这是一个标题这是一个标题
查看代码
<div class="title">
<span>这是一个标题</span>
</div>
1
2
3
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
2
3
4
5
6
7
8
9
10
11
# 6. 倾斜按钮
查看代码
<button class="btn">
<span>倾斜按钮</span>
</button>
1
2
3
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
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
# 7. 弧形边框
选项1
选项2