小编Fli*_*lix的帖子

有没有办法创建一个具有渐变和圆角的边框(或div)?

它应该是这样的:

在此输入图像描述

到目前为止的尝试:

  1. 使用渐变背景加上内部元素来覆盖它,只留下一个外部"边框".该背景显然不是透明的.

body {
  background: #242424;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  color: #FFFFFF;
}

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

h1 {
  margin: 2em;
  text-align: center;
}

a {
  cursor: pointer;
  transition: ease-in-out,.2s,color;
}
a:hover {
  color: #DDD;
}

.nested {
  display: block;
  max-width: 20em;
  padding: 2px;
  overflow: hidden;
  border-radius: 2em;
  background: linear-gradient(to right, #00ff00 0%, #00e5ff 100%);
} …
Run Code Online (Sandbox Code Playgroud)

css border linear-gradients css3 css-shapes

7
推荐指数
1
解决办法
1748
查看次数

标签 统计

border ×1

css ×1

css-shapes ×1

css3 ×1

linear-gradients ×1