Question

我有一个边框，我希望它是顶部的渐变，以在边框上创建灯光效果。但它不起作用，我假设我的边框代码错误或我缺少需要定义的属性。

这是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。

如何仅为跨浏览器工作的顶部边框创建渐变？（注意：我只担心IE 9+我会在IE8及以下使用纯色。）

Answer 1

通过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%;    
}

在边框上使用渐变

1 个答案: