手捉手教你撸个css渐变边框，实现王者荣耀头像框

Ultraman_agul

已于 2023-02-08 15:17:38 修改

阅读量737

点赞数 1

分类专栏：前端杂记文章标签： css 前端 css3

于 2023-02-08 15:16:13 首次发布

本文链接：https://blog.csdn.net/weixin_42699636/article/details/128936192

版权

前端杂记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文通过CSS的border-image属性结合linear-gradient实现了一个从左至右的渐变边框，类似于王者荣耀游戏中的头像框效果。代码示例中详细展示了如何设置颜色和透明度变化，以及调整边框宽度和样式。

摘要由CSDN通过智能技术生成

手捉手教你撸个css渐变边框，实现王者荣耀头像框

看到UI设计了个渐变的边框，实现之后发现真像农的头像框

效果

在这里插入图片描述

border-image: linear-gradient

废话不多说，直接上代码

<!DOCTYPE html>
<html 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.0">
    <title>Document</title>
    <style>
        .box{
            position: relative;
            height: 500px;
            width: 500px;
            background-color: greenyellow;
            margin: 10px;
            border: 10px solid #0f3e6c;
        }
        .box::before{
            content: '';
            height: 100%;
            width: 100%;
            position: absolute;
            border-width: 10px;
            border-style: solid;
            top: -10px;
            left: -10px;
            border-image: linear-gradient(to right, rgba(15, 62, 108, 0) 0%, #1BF5FE 50%,rgba(15, 62, 108, 0) 100%) 10;
        }
        .box::after{
            content: '';
            height: 100%;
            width: 100%;
            position: absolute;
            border-width: 10px;
            border-style: solid;
            top: -10px;
            left: -10px;
            border-image: linear-gradient(0deg, #FFFFFF00 0%, #1BF5FE 50%, #80808000 100%) 10;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>