* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html,body {
	height:100%;
	font-size:14px;
	background:#333;
	color:#fff;
}
body {
	display:flex;
	flex-wrap:wrap;
}
body > div {
	margin:40px;
	text-align:center;
	padding:10px;
	box-sizing:border-box;
	cursor:pointer;
}
:root {
	--borderColor:#03A9F3;
}
/* 第一个*/
    .rect1:hover {
	border:1px dashed var(--borderColor);
}
.rect1 {
	width:200px;
	height:100px;
	background:linear-gradient(to left,var(--borderColor),var(--borderColor)) left top no-repeat,linear-gradient(to bottom,var(--borderColor),var(--borderColor)) left top no-repeat,linear-gradient(to left,var(--borderColor),var(--borderColor)) right top no-repeat,linear-gradient(to bottom,var(--borderColor),var(--borderColor)) right top no-repeat,linear-gradient(to left,var(--borderColor),var(--borderColor)) left bottom no-repeat,linear-gradient(to bottom,var(--borderColor),var(--borderColor)) left bottom no-repeat,linear-gradient(to left,var(--borderColor),var(--borderColor)) right bottom no-repeat,linear-gradient(to left,var(--borderColor),var(--borderColor)) right bottom no-repeat;
	background-size:2px 20px,20px 2px,2px 20px,20px 2px;
	transition:all .4s ease;
	border:1px solid transparent;
}
/*第2个*/
    .rect2 {
	width:200px;
	height:100px;
	position:relative;
	border:2px solid #03A9F3;
}
.rect2::before,.rect2::after {
	content:"";
	position:absolute;
	width:20px;
	height:20px;
	transition:all 0.4s ease;
}
.rect2::before {
	top:-7px;
	left:-7px;
	border-top:2px solid var(--borderColor);
	border-left:2px solid var(--borderColor);
}
.rect2::after {
	right:-7px;
	bottom:-7px;
	border-bottom:2px solid var(--borderColor);
	border-right:2px solid var(--borderColor);
}
.rect2:hover::before,.rect2:hover::after {
	width:calc(100% + 12px);
	height:calc(100% + 12px);
}
/*  第3个*/
    .rect3 {
	width:200px;
	height:100px;
	background:linear-gradient(90deg,var(--borderColor) 50%,transparent 0) repeat-x,linear-gradient(90deg,var(--borderColor) 50%,transparent 0) repeat-x,linear-gradient(0deg,var(--borderColor) 50%,transparent 0) repeat-y,linear-gradient(0deg,var(--borderColor) 50%,transparent 0) repeat-y;
	background-size:4px 2px,4px 2px,2px 4px,2px 4px;
	background-position:0 0,0 100%,0 0,100% 0;
}
.rect3:hover {
	animation:linearGradientMove .3s infinite linear;
}
@keyframes linearGradientMove {
	100% {
	background-position:4px 0,-4px 100%,0 -4px,100% 4px;
}
}/*  第4个 */
    .rect4 {
	position:relative;
	z-index:0;
	width:200px;
	height:100px;
	border-radius:10px;
	overflow:hidden;
	padding:2rem;
}
@keyframes rotate {
	100% {
	transform:rotate(1turn);
}
}/*top是根据原始高度计算的百分比 100px*150%=150px */
    .rect4::before {
	content:'';
	position:absolute;
	z-index:-2;
	left:-50%;
	top:-150%;
	width:200%;
	height:400%;
	/*background-color:#399953;
	*/
      background-color:#1a232a;
	background-repeat:no-repeat;
	background-size:50% 50%,50% 50%;
	background-position:0 0,100% 0,100% 100%,0 100%;
	/*background-image:linear-gradient(#399953,#399953),linear-gradient(#fbb300,#fbb300),linear-gradient(#d53e33,#d53e33),linear-gradient(#377af5,#377af5);
	*/
      background-image:linear-gradient(var(--borderColor),var(--borderColor)),linear-gradient(#333,#333),linear-gradient(#333,#333),linear-gradient(#333,#333);
	/*background-image:conic-gradient(transparent,rgba(168,239,255,1),transparent 30%);
	*/
      animation:rotate 4s linear infinite;
}
/*把中间背景色遮住*/
    .rect4::after {
	content:'';
	position:absolute;
	z-index:-1;
	left:6px;
	top:6px;
	width:calc(100% - 12px);
	height:calc(100% - 12px);
	background:#333;
	border-radius:4px;
	animation:opacityChange 3s infinite alternate;
}
@keyframes opacityChange {
	50% {
	opacity:1;
}
100% {
	opacity:.5;
}
}/*  第5种 */
    .rect5 {
	position:relative;
	width:200px;
	height:100px;
}
.rect5::before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	border:2px solid var(--borderColor);
	transition:all .5s;
	animation:clippath 3s infinite linear;
}
@keyframes clippath {
	0%,100% {
	clip-path:inset(0 0 95% 0);
}
25% {
	clip-path:inset(0 95% 0 0);
}
50% {
	clip-path:inset(95% 0 0 0);
}
75% {
	clip-path:inset(0 0 0 95%);
}
}/*  第6种 */
    .rect6 {
	position:relative;
	width:200px;
	height:100px;
	text-align:center;
	color:#fff;
	/*border:2px solid var(--borderColor);
	*/
      border-radius:10px;
	background:var(--borderColor);
	transition:all .3s;
	cursor:pointer;
}
.rect6:hover {
	filter:contrast(1.1);
}
.rect6:active {
	filter:contrast(0.9);
}
.rect6::before,.rect6::after {
	content:"";
	position:absolute;
	top:-10px;
	left:-10px;
	right:-10px;
	bottom:-10px;
	border:2px solid var(--borderColor);
	transition:all .5s;
	animation:clippath 3s infinite linear;
	border-radius:10px;
}
.rect6::after {
	animation:clippath 3s infinite -1.5s linear;
}
@keyframes clippath {
	0%,100% {
	clip-path:inset(0 0 98% 0);
}
25% {
	clip-path:inset(0 98% 0 0);
}
50% {
	clip-path:inset(98% 0 0 0);
}
75% {
	clip-path:inset(0 0 0 98%);
}
}/*  第7种 */
    .rect7 {
	position:relative;
	width:200px;
	height:100px;
	overflow:hidden;
}
.rect7::after {
	content:"";
	position:absolute;
	top:4px;
	bottom:4px;
	right:4px;
	left:4px;
	background:#333;
	border:2px solid var(--borderColor);
	cursor:pointer;
}
.rect7::before {
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background:#fff;
	transform:rotateZ(-90deg) translate(-100%,-100%);
	transform-origin:top left;
	transition:transform .3s;
	transition-timing-function:linear;
}
.rect7:hover {
	filter:contrast(1.2);
}
.rect7:hover::before {
	transform:rotateZ(0deg) translate(0%,-0%);
}
.rect7 div {
	position:absolute;
	left:4px;
	top:4px;
	width:calc(100% - 8px);
	height:calc(100% - 8px);
	padding:10px;
	z-index:999;
}
/*  第8种 */
    .rect8 {
	width:200px;
	height:100px;
	border:4px solid;
	border-image:linear-gradient(45deg,var(--borderColor),#89f7ff) 1;
	clip-path:inset(0px round 10px);
	animation:huerotate 6s infinite linear;
	filter:hue-rotate(360deg);
}
@keyframes huerotate {
	0% {
	filter:hue-rotate(0deg);
}
100% {
	filter:hue-rorate(360deg);
}
}