我试图应用一个渐变的边界,我认为这是简单的这样做:
border-color: -moz-linear-gradient(top, #555555, #111111);
但这并不奏效。
有人知道做边界渐变的正确方法吗?
我试图应用一个渐变的边界,我认为这是简单的这样做:
border-color: -moz-linear-gradient(top, #555555, #111111);
但这并不奏效。
有人知道做边界渐变的正确方法吗?
当前回答
这是一个很好的半跨浏览器的方法,有渐变边界,淡出一半。只需将颜色停止设置为rgba(0,0,0,0)
.fade-out-borders {
min-height: 200px; /* for example */
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}
<div class="fade-out-border"></div>
用法解释:
Formal grammar: linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
\---------------------------------/ \----------------------------/
Definition of the gradient line List of color stops
更多信息请点击:https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
其他回答
Mozilla目前只支持CSS渐变作为background-image属性的值,以及在简写背景中。
——https://developer.mozilla.org/en/CSS/-moz-linear-gradient
Example 3 - Gradient Borders
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;
——http://www.cssportal.com/css3-preview/borders.htm
这是一个带有透明背景的渐变边界,使用边界半径
.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; }
试试这个,对我很管用。
div { border - radius: 20 px; 身高:70 vh; 溢出:隐藏; } {前div:: 内容:”; 显示:块; box-sizing: border-box; 高度:100%; 边框:1em实心透明; 边界图像:线性渐变(到顶部,红色0%,蓝色100%); border-image-slice: 1; } < div > < / div >
这是小提琴的链接 https://jsfiddle.net/yash009/kayjqve3/1/希望这对你有所帮助
border-image属性可以实现这一点。您还需要指定border-style和border-width。
border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
border-width: 4px;
border-style: solid;
在MDN上阅读更多。