border 是渐变色怎么设置圆角 radius?

Z_ One Dream

于 2024-04-29 17:16:43 发布

阅读量301

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_42335036/article/details/138319212

版权

本文讲述了开发者在UI设计中遇到的问题，即如何为`.box`元素设置具有特定角度渐变的圆角border。作者分享了实现这一效果的多种方法，强调前端开发者应享受解决问题的过程，即使看似棘手的需求也不要轻易说无法实现。

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

什么？渐变色的 border 无法设置 radius？

你5年开发了。ui 能做出的东西，你说你做不出来？

.box {
  width: 100px;
  height: 150px;
  position: relative;
  z-index: 1;
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background-image: linear-gradient(135deg, rgba(124, 144, 218, 1), #495ca0, #3c4a82);
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-clip: content-box;
    padding: 1px;
    background-image: linear-gradient(180deg, #6171aa 0%, #394268 100%);
  }
}

说实话，有 n 种解决方式

希望同样身为前端的你们能享受痛苦的感觉，享受每次让你头疼的需求，不要说轻易说无法实现。

前端的苦前端自己吃