<分区>
css - 有没有办法创建一个带有渐变和圆 Angular 边框的按钮(或 div)？
它应该是这样的:
到目前为止的尝试:
- 使用渐变背景加上一个内部元素来覆盖它，只留下一个外部“边框”。 背景明显不透明。
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>- 使用
border-image。 Angular 不是圆的。
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>最佳答案
不，您不能在具有border-radius 的元素上使用border-image 因为as per specs ，只有元素的背景根据边框半径而不是 border-image 进行裁剪。所以图像总是矩形(或正方形)。
如果需要透明的中心部分(或透明的内容区域)，那么最好的办法是使用 SVG。 SVG的描边甚至可以取一个渐变作为值，所以它可以产生一个圆形的形状，它的边界是渐变的，中间部分是透明的。
用于创建形状的 path 很简单，您可以阅读有关路径命令的更多信息 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 剪辑路径)，那是行不通的。
关于css - 有没有办法创建一个带有渐变和圆 Angular 边框的按钮(或 div)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36614119/