我试图应用一个渐变的边界,我认为这是简单的这样做:
border-color: -moz-linear-gradient(top, #555555, #111111);
但这并不奏效。
有人知道做边界渐变的正确方法吗?
我试图应用一个渐变的边界,我认为这是简单的这样做:
border-color: -moz-linear-gradient(top, #555555, #111111);
但这并不奏效。
有人知道做边界渐变的正确方法吗?
当前回答
渐变边框的例子
使用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 >
其他回答
这里有一篇很好的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 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 >
这是一个hack,但是在某些情况下你可以通过使用background-image来指定渐变,然后用box-shadow掩盖实际的背景来达到这种效果。例如:
p {
display: inline-block;
width: 50px;
height: 50px;
/* The background is used to specify the border background */
background: -moz-linear-gradient(45deg, #f00, #ff0);
background: -webkit-linear-gradient(45deg, #f00, #ff0);
/* Background origin is the padding box by default.
Override to make the background cover the border as well. */
-moz-background-origin: border;
background-origin: border-box;
/* A transparent border determines the width */
border: 4px solid transparent;
border-radius: 8px;
box-shadow:
inset 0 0 12px #0cc, /* Inset shadow */
0 0 12px #0cc, /* Outset shadow */
inset -999px 0 0 #fff; /* The background color */
}
来自:http://blog.nateps.com/the-elusive-css-border-gradient
实现相同效果的另一种方法是利用多个背景图像,IE9+、较新的Firefox和大多数基于webkit的浏览器都支持这个特性:http://caniuse.com/#feat=multibackgrounds
在IE6-8中还有一些使用多个背景的选项:http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers/
例如,假设你想要一个5px宽的左边框,它是一个从蓝色到白色的线性渐变。创建渐变为图像,并导出为PNG格式。列出任何其他CSS背景之后的左边边界梯度:
#theBox { background: url(/images/theBox-leftBorderGradient.png) left no-repeat, ...; }
您可以通过更改背景速记属性的背景位置部分,将此技术应用于顶部、右侧和底部边界梯度。
下面是给定示例的jsFiddle: http://jsfiddle.net/jLnDt/
你可以在不使用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。