手捉手教你撸个css渐变边框，实现王者荣耀头像框
Posted Ultraman_agul
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手捉手教你撸个css渐变边框，实现王者荣耀头像框相关的知识，希望对你有一定的参考价值。
手捉手教你撸个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>
以上是关于手捉手教你撸个css渐变边框，实现王者荣耀头像框的主要内容，如果未能解决你的问题，请参考以下文章