526互联

圆角渐变色边框

发布时间 2023-10-09 14:58:51作者: 雨歇微凉意

效果图：

 

<!doctype>
<html>
<style>
body {
  background-color: #06375a;
}
.list-wrap {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    background: rgba(7, 4, 99, 0.85);
    border-radius: 10px;
}
.top-left, .top-right, .bottom-left, .bottom-right {
    position: absolute;
    width: 40%;
    padding-bottom: 40%;
    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    z-index: -1;
}
.top-left {
    top: -1px;
    left: -1px;
    border-top-left-radius: 10px;
    background-image: linear-gradient(
            to bottom right, rgba(7, 4, 99, 0.7) 0,
            rgba(7, 4, 99, 0.27) 20%,
            rgba(7, 4, 99, 0) 45%
    ),
    linear-gradient(
            to bottom right,
            rgba(11, 57, 222, 1) 0,
            rgba(17, 76, 229, 0.27) 20%,
            rgba(21, 92, 235, 0) 45%,
            transparent
    );
}
.top-right {
    top: -1px;
    right: -1px;
    border-top-right-radius: 10px;
    background-image: linear-gradient(
            to bottom left, rgba(7, 4, 99, 0.7) 0,
            rgba(7, 4, 99, 0.27) 20%,
            rgba(7, 4, 99, 0) 45%
    ),
    linear-gradient(
            to bottom left,
            rgba(11, 57, 222, 1) 0,
            rgba(17, 76, 229, 0.27) 20%,
            rgba(21, 92, 235, 0) 45%,
            transparent
    );
}
.bottom-left {
    bottom: -1px;
    left: -1px;
    border-bottom-left-radius: 10px;
    background-image: linear-gradient(
            to top right, rgba(7, 4, 99, 0.7) 0,
            rgba(7, 4, 99, 0.27) 20%,
            rgba(7, 4, 99, 0) 45%
    ),
    linear-gradient(
            to top right,
            rgba(11, 57, 222, 1) 0,
            rgba(17, 76, 229, 0.27) 20%,
            rgba(21, 92, 235, 0) 45%,
            transparent
    );
}
.bottom-right {
    bottom: -1px;
    right: -1px;
    border-bottom-right-radius: 10px;
    background-image: linear-gradient(
            to top left, rgba(7, 4, 99, 0.7) 0,
            rgba(7, 4, 99, 0.27) 20%,
            rgba(7, 4, 99, 0) 45%
    ),
    linear-gradient(
            to top left,
            rgba(11, 57, 222, 1) 0,
            rgba(17, 76, 229, 0.27) 20%,
            rgba(21, 92, 235, 0) 45%,
            transparent
    );
}
</style>
<body>
  <div class="list-wrap">
    <span class="top-left"></span>
    <span class="top-right"></span>
    <span class="bottom-left"></span>
    <span class="bottom-right"></span>
  </div>
</body>
</html>