CSS实现渐变色边框支持设置 border-radius

最新推荐文章于 2024-07-24 11:36:10 发布

银霖

最新推荐文章于 2024-07-24 11:36:10 发布

阅读量522

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_39651199/article/details/133752518

版权

单层元素、background-clip、background-origin、background-image

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


.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}

参考网站：