我试图应用一个渐变的边界,我认为这是简单的这样做:
border-color: -moz-linear-gradient(top, #555555, #111111);
但这并不奏效。
有人知道做边界渐变的正确方法吗?
我试图应用一个渐变的边界,我认为这是简单的这样做:
border-color: -moz-linear-gradient(top, #555555, #111111);
但这并不奏效。
有人知道做边界渐变的正确方法吗?
当前回答
这是一个带有透明背景的渐变边界,使用边界半径
.gradient-border {
border-radius: 999px;
padding: 10px 3rem;
display: inline-block;
position: relative;
background: transparent;
border: none;
}
.gradient-border::before {
content: "";
position: absolute;
inset: 0;
padding: 2px;
border-radius: 9999px;
background: linear-gradient(87.36deg, blue 6.42%, red 84.24%),
linear-gradient(0deg, #FFFFFF, #FFFFFF);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
现场演示:https://jsfiddle.net/jbernier/0eypxc74/1/
其他回答
我同意szajmon的观点。他和昆汀回答的唯一问题是跨浏览器兼容性。
HTML:
<div class="g">
<div>bla</div>
</div>
CSS:
.g {
background-image: -webkit-linear-gradient(300deg, white, black, white); /* webkit browsers (Chrome & Safari) */
background-image: -moz-linear-gradient(300deg, white, black, white); /* Mozilla browsers (Firefox) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', gradientType='1'); /* Internet Explorer */
background-image: -o-linear-gradient(300deg,rgb(255,255,255),rgb(0,0,0) 50%,rgb(255,255,255) 100%); /* Opera */
}
.g > div { background: #fff; }
这里有一篇很好的css技巧文章:https://css-tricks.com/gradient-borders-in-css/
我能够想出一个非常简单的,单元素的解决方案,使用多个背景和background-origin属性。
.wrapper {
background: linear-gradient(#222, #222),
linear-gradient(to right, red, purple);
background-origin: padding-box, border-box;
background-repeat: no-repeat; /* this is important */
border: 5px solid transparent;
}
这种方法的优点是:
它不受z指数的影响 它可以通过改变透明边框的宽度来轻松缩放
去https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100看看吧
最直接的方法是使用border-image属性。你可以使用任何你想要的线性渐变或重复渐变。对于线性梯度,边界图像切片属性需要为1。
.gradient-border {
border-style: solid;
border-width: 2px;
border-image: linear-gradient(45deg, red, blue) 1;
}
参考文献 MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice 数字海洋- https://www.digitalocean.com/community/tutorials/css-gradient-borders-pure-css
Webkit支持边界渐变,现在也接受Mozilla格式的渐变。
Firefox以两种方式支持渐变:
使用border-image和border-image-source 使用border-right-colors(右/左/上/下)
IE9不支持。
这是一个带有透明背景的渐变边界,使用边界半径
.gradient-border {
border-radius: 999px;
padding: 10px 3rem;
display: inline-block;
position: relative;
background: transparent;
border: none;
}
.gradient-border::before {
content: "";
position: absolute;
inset: 0;
padding: 2px;
border-radius: 9999px;
background: linear-gradient(87.36deg, blue 6.42%, red 84.24%),
linear-gradient(0deg, #FFFFFF, #FFFFFF);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
现场演示:https://jsfiddle.net/jbernier/0eypxc74/1/