CSS-圆圈渐变边框

最新推荐文章于 2024-08-08 11:48:45 发布

别undefined辣

最新推荐文章于 2024-08-08 11:48:45 发布

阅读量202

点赞数 3

文章标签： css 前端 html

本文链接：https://blog.csdn.net/2201_75568521/article/details/141017548

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圆形渐变边框</title>
  <style>
    .box {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin: auto;
      margin-top: 50px;
      text-align: center;
      border: 3px solid transparent;
      border-radius: 100px;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      background-image: linear-gradient(to right, #fff, #fff),
        linear-gradient(to right, #8f41e9, #578aef);
    }
  </style>
</head>

<body>
  <div class="box">11</div>
</body>
</html>