css边框颜色渐变

直接上代码看效果

<!DOCTYPE html>

<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="webhivers" />
    <meta name="format-detection" content="telephone=no">
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_695050_qf5jdjknto.css">
    <title>css写样式</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<style>
    .center {
        width: 100px;
        height: 200px;
        border-right: 2px solid;
        border-image: linear-gradient(180deg,
                rgba(25, 53, 97, 0) 0%,
                rgba(25, 53, 97, 0) 10%,
                #05bbda 50%,
                rgba(25, 53, 97, 0.8) 90%,
                rgba(25, 53, 97, 0) 100%) 2 2 2 2;
    }
</style>

<body>
    <div class="center"></div>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/weixin_44042792/article/details/135124380