logo标签列表

从左侧、顶部、底部和右侧渐变的彩色边框

css
6
我想在左上角设置白色边框，右上角为深蓝色，左下角为深灰色，右下角为浅灰色/浅蓝色，并且设置渐变效果，这个用CSS实现可行吗？还是需要使用背景图片？ enter image description here
1个回答
6
您可以使用: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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接