四个角四个颜色的渐变边框
我写的,跟图片不一样
border: 10px solid #02DB82;
border-image: linear-gradient(to right bottom,#fed79e,#add8f4,#fed79e,#f76aca) 10 10 10 10;
改进了一下,还是不一样
border-image: linear-gradient(to right bottom,#fed79e 0%,#add8f4 25%,#fed79e 50%,#f76aca 75%,#fed79e 100%) 10 10 10 10;
颜色我尽力了,太久没碰前端东西了
<html>
<head>
<style>
div{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
.border-image {
width: 200px;
height: 100px;
border-radius: 10px;
border-image-source: linear-gradient(45deg, #F76ACA, #FED79E, #ADD8F4);
border-image-slice: 1;
border-image-repeat: stretch;
}
</style>
</head>
<body>
<div class="border-image">
</div>
</body>
</html>
我改了下颜色,完成度很高了,谢谢!
@Pororo酱: https://www.cnblogs.com/coco1s/ 多看这个大佬