我试图应用一个渐变的边界,我认为这是简单的这样做:
border-color: -moz-linear-gradient(top, #555555, #111111);
但这并不奏效。
有人知道做边界渐变的正确方法吗?
我试图应用一个渐变的边界,我认为这是简单的这样做:
border-color: -moz-linear-gradient(top, #555555, #111111);
但这并不奏效。
有人知道做边界渐变的正确方法吗?
当前回答
我同意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看看吧
而不是边框,我会使用背景渐变和填充。同样的外观,但更简单,更有支撑。
举个简单的例子:
.g { Background-image: -webkit-gradient(线性,左下,左上,彩色停止(0.33,rgb(14,173,173)),彩色停止(0.67,rgb(0,255,255))); 背景-图像:-moz-linear-gradient(中底,rgb(14,173,173) 33%, rgb(0,255,255) 67%); 填充:2 px; } .g > div{背景:#fff;} < div class = " g " > < div > bla < / div > < / div >
编辑:你也可以利用:before选择器@WalterSchwarz指出:
body { padding: 20px; } .circle { width: 100%; height: 200px; background: linear-gradient(to top, #3acfd5 0%, #3a4ed5 100%); border-radius: 100%; position: relative; text-align: center; padding: 20px; box-sizing: border-box; } .circle::before { border-radius: 100%; content: ''; background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%); top: -10px; left: -10px; bottom: -10px; right: -10px; position: absolute; z-index:-1; } <div class="circle"></div>
border-image属性可以实现这一点。您还需要指定border-style和border-width。
border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
border-width: 4px;
border-style: solid;
在MDN上阅读更多。
这是一个带有透明背景的渐变边界,使用边界半径
.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/
最直接的方法是使用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