直接上代码看效果
<!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>