Question

这应该是这样的：

到目前为止尝试：

使用渐变背景加上内部元素来覆盖它，只留下一个外部＆＃34;边框＆＃34;。 背景显然不透明。

＆＃13;

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%);
}
.nested span {
  display: inline-block;
  padding: 1em;
  text-align: center;
  background: #242424;
  border-radius: 2rem;
}
.nested span p {
  padding: 0 2em;
  margin: 0;
}

.pseudo {
  display: block;
  margin-top: 20px;
  position: relative;
  border-radius: 2em;
  padding: 1em 2em;
  background: #242424;
}
.pseudo:after {
  position: absolute;
  z-index: -1;
  top: -2px;
  bottom: -2px;
  right: -2px;
  left: -2px;
  background: linear-gradient(to right, #00ff00 0%, #00e5ff 100%);
  border-radius: 2em;
  content: '';
}

＆＃13;

<div>
    <h1>Gradient + Border Radius</h1>
    <a class="nested"><span><p>ANOTHER ONE</p></span></a>
    <a class="pseudo">AND ANOTHER ONE</a>
</div>

＆＃13;

使用border-image。 角不是圆角。

＆＃13;

body {
  background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/ignasi_pattern_s.png);
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

a {
  padding: 20px 40px;
  border-image: linear-gradient(to bottom right, #00aeef 0%, #7cc578 100%);
  border-image-slice: 1;
  border-radius: 10px;
}

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 {
  text-decoration: none;
  font-weight: bold;
  color: black;
  cursor: pointer;
  transition: ease-in-out,.2s,color;
}
a:hover {
  color: #DDD;
}

＆＃13;

<div>
    <h1>Gradient + [non working] Border Radius</h1>
    <a href="#">CLICK ME	</a>
</div>

＆＃13;

Answer 1

不，您不能对border-image元素使用border-radius因为as per specs，因此只会根据边框半径而不是{{{{}}剪切元素的背景1}}。所以图像总是一个矩形（或方形）。

如果需要透明中心部分（或透明内容区域），那么最好的选择是使用SVG。 SVG的笔划可以采用渐变作为值，因此它可以产生圆形的形状，其边框是渐变，中心部分是透明的。

用于创建形状的border-image很简单，您可以阅读有关路径命令here的更多信息。

＆＃13;

path

＆＃13;

.border-with-grad {
  position: relative;
  height: 100px;
  width: 250px;
  color: white;
  line-height: 100px;
  text-align: center;
  letter-spacing: 1.5px;
}
.border-with-grad svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
.border-with-grad path {
  fill: transparent;
  stroke: url(#border-gradient);
  stroke-width: 4;
}

/* Just for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
  min-height: 100vh;
  font-family: sans-serif;  
}

＆＃13;

使用CSS，我们可以使用<div class='border-with-grad'> <svg viewBox='0 0 250 100'> <defs> <linearGradient id='border-gradient' gradientUnits='objectBoundingBox' gradientTransform='rotate(5 0.5 0.5)'> <stop offset='0%' stop-color='rgb(248,244,135)' /> <stop offset='25%' stop-color='rgb(248,244,135)' /> <stop offset='75%' stop-color='rgb(53,176,182)' /> <stop offset='100%' stop-color='rgb(53,176,182)' /> </linearGradient> </defs> <path d='M50,95 a45,45 0 0,1 0,-90 h150 a45,45 0 1,1 0,90 h-150' /> </svg> CLICK HERE </div>使中心部分透明，但浏览器支持非常差。目前只有支持webkit的浏览器支持此属性。另一种方法是使用mask-image，但如果你需要支持IE和Firefox（Firefox仅支持SVG剪辑路径），那就不行了。

Answer 2

如果您需要完整的浏览器支持，并且您希望内部部分是透明的，并且您希望仅使用CSS解决方案......则不能使用渐变。你需要假装白色阴影

.test {
  width: 200px;
  height: 80px;
  border-radius: 40px;
  position: relative;
  overflow: hidden;
  color: white;
  font-size: 50px;
  padding-left: 30px;
}  

.test:after  {
  content: "";
  position: absolute;
  
  width: calc(100% - 10px);  
  height: calc(100% - 10px);  
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  border-radius: inherit;
  box-shadow: -20px 0px 10px 5px rgba(250, 250, 20, 1),
               20px 0px 10px 10px rgba( 20, 250, 200, 1);
}

body {
  background: radial-gradient(circle, black, darkgrey);
}

<div class="test">TEST</div>

有没有办法创建一个具有渐变和圆角的边框（或div）？

2 个答案: