我试图应用一个渐变的边界,我认为这是简单的这样做:
border-color: -moz-linear-gradient(top, #555555, #111111);
但这并不奏效。
有人知道做边界渐变的正确方法吗?
我试图应用一个渐变的边界,我认为这是简单的这样做:
border-color: -moz-linear-gradient(top, #555555, #111111);
但这并不奏效。
有人知道做边界渐变的正确方法吗?
当前回答
渐变边框来自Css-Tricks: http://css-tricks.com/examples/GradientBorder/
.multbg-top-to-bottom {
border-top: 3px solid black;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image:
-moz-linear-gradient(#000, transparent),
-moz-linear-gradient(#000, transparent);
background-image:
-o-linear-gradient(#000, transparent),
-o-linear-gradient(#000, transparent);
background-image:
linear-gradient(#000, transparent),
linear-gradient(#000, transparent);
-moz-background-size: 3px 100%;
background-size: 3px 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
}
其他回答
这是一个很好的半跨浏览器的方法,有渐变边界,淡出一半。只需将颜色停止设置为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
Webkit支持边界渐变,现在也接受Mozilla格式的渐变。
Firefox以两种方式支持渐变:
使用border-image和border-image-source 使用border-right-colors(右/左/上/下)
IE9不支持。
我同意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; }
你可以在不使用background, background-clip和background-origin删除边界半径的情况下实现这一点:
<时尚> .border-gradient-rounded { /* Border */ 边框:4px实体透明; border - radius: 20 px; 背景: 线性渐变(向右,白色,白色), 线性梯度(右,红,蓝); 背景剪辑:填充盒、边框盒; 背景-起源:填充盒,边框盒; /*其他样式*/ 宽度:100 px; 高度:40像素; 填充:12 px; } > < /风格 < div class = " border-gradient-rounded”> 内容 < / div >
基本上,这将白色背景放置在渐变背景上,从内部边界剪辑白色背景,并从外部边界剪辑渐变背景。这就是为什么你需要将边框定义为纯透明的。
此dev.to post的功劳归于方法2。
渐变边框的例子
使用border-image css属性
credit to: border-image
.grad-border { 身高:1 px; 宽度:85%; 保证金:0自动; 显示:flex; } .left-border, .right-border { 宽度:50%; Border-bottom: 2px solid #695f52; 显示:inline-block; } .left-border { Border-image:线性梯度(270deg, #b3b3b3, #fff) 1; } .right-border { 边界图像:线性梯度(90度,#b3b3b3, #fff) 1; } < div class = " grad-border”> < div class = "左边框" > < / div > < div class = "右边界" > < / div > < / div >