ie html边框,CSS实现蚂蚁边框线（IE10+）-优快云博客

本文介绍了一种使用纯CSS实现的动态边框效果。通过设置复杂的线性渐变和关键帧动画，使得元素的边框能够呈现出独特的闪烁效果。此外，还提供了不同浏览器前缀的兼容性写法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.box {

width:300px;

height:200px;

padding:1px;

background-size:10px 10px;

background-image:-ms-linear-gradient(-45deg,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));

background-image:-moz-linear-gradient(-45deg,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));

background-image:-webkit-linear-gradient(-45deg,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));

background-image:linear-gradient(-45deg,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));

-ms-animation:zi-antBorder 0.8s linear 0s infinite normal;

-moz-animation:zi-antBorder 0.8s linear 0s infinite normal;

-webkit-animation:zi-antBorder 0.8s linear 0s infinite normal;

animation:zi-antBorder 0.8s linear 0s infinite normal;

}

@keyframes zi-antBorder {

0% {

background-position:0px 0px;

}

50% {

background-position:0px 5px;

}