# css 边框效果

# 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.信封边框

/* 方法一 */
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

信封边框1

信封边框2

# 3.蚂蚁线

@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/.6em .6em; 
    animation:ants 12s linear infinite;
}

1
2
3
4
5
6
7
8

蚂蚁线

# 4.弧边

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. 倾斜按钮


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

1
2
3
4

.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