css 设置渐变边框

最新推荐文章于 2024-08-14 13:50:25 发布

Koreyoshi·

最新推荐文章于 2024-08-14 13:50:25 发布

阅读量635

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/koreyoshi123654/article/details/131109185

版权

css 设置渐变边框：只需要用到单层元素，为其分别设置 `background-clip、background-origin、background-image` 这三个属性，每个属性设置两组值，第一组用于设置border内的单色背景，第二组用于设置border上的渐变色。

  .active {
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #fff, #fff), linear-gradient(180deg, rgba(64, 194, 255, 1), rgba(16, 130, 255, 1));
  }