邊框上使用漸變

我有一個邊框，我想成爲頂部漸變以在邊框上創建光效。然而，它不起作用，我認爲我的代碼有錯誤的邊界或我缺少需要定義的屬性。邊框上使用漸變

這裏是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

邊框上使用漸變

回答

相關問題