边框上使用渐变

我有一个边框，我想成为顶部渐变以在边框上创建光效。然而，它不起作用，我认为我的代码有错误的边界或我缺少需要定义的属性。边框上使用渐变

这里是CSS：

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
-o-box-sizing: border-box; 
box-sizing: border-box; 
padding: 25px; 
background:#f2f2f2; 
border: 5px solid #b30005; 
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.4); 
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.4); 
-o-box-shadow: 0 5px 10px rgba(0,0,0,0.4); 
box-shadow: 0 5px 10px rgba(0,0,0,0.4); 
-webkit-border-radius:25px; 
-moz-border-radius: 25px; 
-o-border-radius: 25px; 
border-radius:25px; 
/* border-top: 25px solid #b30005; */ 

border-top: 25px solid rgb(179,0,5); /* Old browsers */ 
border-top: 25px solid url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwJSIgc3RvcC1jb2xvcj0iI2IzMDAwNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); /*IE 9 */ 
border-top: 25px solid -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(179,0,5,1) 10%); /* FF3.6+ */ 
border-top: 25px solid -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(10%,rgba(179,0,5,1))); /* Chrome,Safari4+ */ 
border-top: 25px solid -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(179,0,5,1) 10%); /* Chrome10+,Safari5.1+ */ 
border-top: 25px solid: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(179,0,5,1) 10%); /* Opera 11.10+ */ 
border-top: 25px solid: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(179,0,5,1) 10%); /* IE10+ */ 
border-top: 25px solid linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(179,0,5,1) 10%); /* W3C */ 
z-index:3;

这里是一个fiddle我创建。

如何创建仅用于跨浏览器的顶部边框的渐变？（注意：我只是担心IE9 + IE8和以下版本会使用纯色。）

来源

2012-11-12 L84

我不认为你可以设置渐变到边框。您可以通过将渐变设置为外部div来模拟它，并使用填充来显示一些背景。 – coopersita

下面是几个解决方案的工作，通过CSS-Tricks。

看来您可以使用border-image设置线性渐变。例如，对于底部到顶部的边框：

.bottom-to-top { 
    border-width:3px; 
    -webkit-border-image: 
    -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; 
    -webkit-border-image: 
    -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; 
    -o-border-image: 
    -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; 
    -moz-border-image: 
    -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;  
}

来源

2012-11-13 00:18:09

边框上使用渐变

回答

相关问题