具有从左、上、下和右颜色渐变的边框

Posted 2023-02-24

【中文标题】具有从左、上、下和右颜色渐变的边框

【英文标题】：Border with color gradient from left, top, bottom and right

【发布时间】：2016-08-29 10:00:14

【问题描述】：

我想在左上角添加一个白色边框，右上角为深蓝色，左下角为深灰色，右下角为浅灰色/浅蓝色，带有渐变？

这可以使用 css 还是我应该使用背景图片？

【参考方案1】：

您可以使用:before 伪元素和linear-gradient 来创建类似边框的效果。

.element 
  background: white;
  position: relative;
  width: 200px;
  height: 150px;
  margin: 50px;

.element:before 
  content: '';
  position: absolute;
  left: -5px;
  top: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  background: linear-gradient(45deg, rgba(220, 218, 219, 1) 0%, rgba(255, 255, 255, 1) 42%, rgba(255, 255, 255, 1) 59%, rgba(125, 188, 220, 1) 100%);
  z-index: -1;

<div class="element"></div>