渐变边框小型研究（如果做出一个颜色渐变、宽度渐变的边框)

最新推荐文章于 2024-04-16 14:16:52 发布

AboyL

最新推荐文章于 2024-04-16 14:16:52 发布

阅读量745

点赞数

分类专栏：前端文章标签： css 渐变边框

本文链接：https://blog.csdn.net/AboyL/article/details/84194005

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

前几天跟人讨论到一道题目。怎么实现如图的效果
在这里插入图片描述

可以看到。这里有点渐变边框。
不过对于这个题目我们两人产生了一点歧义。。。
我以为是渐变边框加上逐渐缩小。。。
然后群友认为的是渐变边框
后来群友给出了渐变边框的解法。
https://www.jianshu.com/p/14268d2f00f7
我做了逐渐缩小的解法。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>渐变边框</title>
  <style>
    .warpper {
      width: 300px;
      height: 300px;
      margin: 100px auto;
      padding: 10px;
      box-sizing: border-box;
      clip-path: url(#svgPath);
      background: linear-gradient(to bottom, #000, #fff);
    }

    .content {
      height: 300px;
      background: #fff;
      border-radius: 10px;
      padding: 10px;
    }
  </style>
</head>

<body>
  <svg height="0" width="0">
    <defs>
      <clipPath id="svgPath">
        <circle cx="10" cy="10" r="10"></circle>
        <circle cx="290" cy="10" r="10"></circle>
        <polygon points="
        10,0 
        290,0 
        290,10 
        300,10
        290,300
        10 300
        0 10
        10 10" />
      </clipPath>
    </defs>
  </svg>
  <div class="warpper">
    <div class="content">
        焚我残躯，熊熊圣火。生亦何欢，死亦何苦？唯善除恶，唯光明故。喜乐悲愁，皆归尘土。怜我世人，忧患实多！怜我世人，忧患实多
    </div>
  </div>
</body>

</html>

其具体的使用就是使用了clip-path加上svg进行路径绘制解决了问题
最后的实现效果参考
codepen
不过里面为了显示效果，所以把参数调大了一点。在具体实践中还需要进行调节
参考阅读
css、svg的clip-path
另外推荐一篇对css边框研究很深的文章
聊聊双11互动主动法中前端技术亮点

AboyL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
渐变边框小型研究（如果做出一个颜色渐变、宽度渐变的边框)

前几天跟人讨论到一道题目。怎么实现如图的效果可以看到。这里有点渐变边框。不过对于这个题目我们两人产生了一点歧义。。。我以为是渐变边框加上逐渐缩小。。。然后群友认为的是渐变边框后来群友给出了渐变边框的解法。https://www.jianshu.com/p/14268d2f00f7我做了逐渐缩小的解法。&lt;!DOCTYPE html&gt;&lt;html lang="en"...
复制链接

扫一扫

专栏目录