平时工作中遇到的一些小特效，记录一下，用到的时候直接复制粘贴了
半透明边框
背景知识 background-clip
默认情况下，背景的颜色会延伸至边框下层，这意味着我们设置的透明边框效果会被覆盖掉，在CSS3中，我们可以通过设置background-clip: padding-box来改变背景的默认行为，打到我们想要的效果
<style>
main {
width: 100%;
height: 100vh;
background: #4b7b7c;
padding-top: 100px;
}
div {
padding: 12px;
margin: 20px auto;
width: 200px;
background: #c7b723;
border: 10px solid hsla(0, 0%, 100%, .5);
}
.default {
margin-top: 20px;
background-clip: padding-box;
}
</style>
<body>
<main>
<div>默认背景</div>
<div class="default">透明边框背景</div>
</main>
</body>
效果如下：
多重边框
背景知识：box-shadow, outline,outline-offset
box-shadow相信很多人都已经用透了，可用来给元素添加各种阴影效果，反过来，也只有我们需要实现阴影时才会想起它，其实，box-shadow还接受第四个参数作为阴影扩张半径，当我们只设置扩张半径时，零偏移，零模糊，产生的效果其实相当于一条实线“边框”。
box-shadow只能模拟实线边框效果，某些情况下，我们可能需要生成虚线的边框效果，我们可以通过类似于border的描边outline和对应的描边偏移outline-offset来实现。
<style>
main {
width: 100%;
padding: 0 10vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
div:nth-of-type(1) {
width: 60px;
height: 60px;
border-radius: 50%;
background: #c0faf5;
margin: 105px 29px;
box-shadow: 0 0 0 10px #ace0db, 0 0 0 20px #94c0bc,
0 0 0 30px #83aaa7, 0 0 0 40px #6b928f,
0 0 0 50px #598884, 0 0 0 60px #3b7973,
0 0 0 70px #2b746d, 0 0 0 80px #1a5f59;
}
div:nth-of-type(2) {
width: 200px;
height: 120px;
background: #a3d6d2;
border: 5px solid #4b7b7c;
margin-left: 200px;
outline: #4b7b7c dashed 1px;
outline-offset: -10px;
margin-bottom: 20px;
}
</style>
<body>
<main>
<div></div>
<div></div>
</main>
</body>
动图条纹进度条
<style>
main {
width: 800px;
padding: 80px 0px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.progress-outer {
width: 60%;
height: 12px;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.progress-enter {
height: inherit;
background: #d6ecea;
}
.progress-bg {
width: 60%;
height: inherit;
border-radius: 6px;
background: repeating-linear-gradient(-45deg, #ace0db 25%, #1a5f59 0, #ace0db 50%,
#1a5f59 0, #ace0db 75%, #1a5f59 0);
background-size: 16px 16px;
animation: progressAnimation 20s linear infinite;
}
@keyframes progressAnimation {
to {
background-position: 200% 0;
}
}
</style>
<body>
<main>
<div class="progress-outer">
<!--更好的扩展-->
<div class="progress-enter">
<div class="progress-bg"></div>
</div>
<!-- <span>60%</span> -->
</div>
</main>
</body>
效果是动态的，这里懒得截动图了
