是否有一种方法来创建带有渐变并且具有圆角的边框的按钮（或div）？ [英] Is there a way to create a button (or div) with a border that has a gradient and has rounded corners?

问题描述

这应该是这样：

到目前为止的尝试：

1. 使用渐变背景加内部元素覆盖它，外部边界。 背景显然不透明。

1. Using a gradient background plus an inner element to cover it and leave just an outer "border". The background is obviously not transparent.

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: '';
}

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

1. 使用 border-image 。 角不圆整。

1. Using border-image. The corners are not rounded.

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;
}

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

$ b

推荐答案

不，您不能在<$ c $的元素上使用 border-image c> border-radius ，因为符合规格，只有基于边框半径而不是 border-image 剪切元素的背景。因此，图片将始终是一个矩形（或正方形）。

No, you can't use border-image on an element with border-radius because as per specs, only the background of the element is clipped based on border radius and not the border-image. So the image would always be a rectangle (or square).

如果需要透明中心部分（或透明内容区域），最好的办法是使用SVG。 SVG的笔画甚至可以采用渐变作为值，因此它可以产生边框是渐变的中心部分是透明的圆形。

If the need is for a transparent center portion (or a transparent content area) then the best bet is to use SVG. SVG's stroke can take even a gradient as value and so it can produce a rounded shape whose border is a gradient and center portion is transparent.

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

The path used for creating the shape is simple and you can read more about path commands here.

.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;  
}

<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>

使用CSS，我们可以使用 mask-image 使中心部分透明，但它的浏览器支持非常差。目前只有webkit支持的浏览器支持这个属性。另一种方法是使用 clip-path ，但是如果你需要支持IE和Firefox（Firefox只支持SVG剪辑路径），那么它就是no-go。

With CSS, we can use mask-image to make the center portion as transparent but its browser support is very poor. At present only webkit powered browsers support this property. Another way would be to make use of clip-path but that is no-go if you need to support IE and Firefox (Firefox supports SVG clip paths only).

这篇关于是否有一种方法来创建带有渐变并且具有圆角的边框的按钮（或div）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！