純css漸變

Question

任何人都知道我可以用純CSS來做這種漸變。它不必在IE中工作。 我可以得到它的工作，但我似乎無法像圖像顯示一樣左右漸變漸變。 任何想法將不勝感激。再次，這是使用直css來做到這一點。

Answer 1

這個網站是驚人的做CSS漸變：

http://www.colorzilla.com/gradient-editor/

你甚至可以導入圖像或CSS。

一個例子是：

background: #1e5799; 
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); 
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); 
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); 
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); 
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0); 

Answer 2

爲什麼你需要梯度呢？如何陰影。

Examples

Answer 3

這是一個非常複雜的任務。他們將一格定位在前面一格之後。後面的一個是他們創造陰影的地方，然後他們改變它並且定位它以達到這個效果。這裏有一個做這個技巧的指南（有一個角落，但你可以調整一下，得到這個效果）...我相信有一些具體的指南可以達到你想要的效果，但他們似乎正在逃避我今天的搜索技巧。

http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow

Answer 4

隨着純CSS，你可以使用徑向漸變。

假設你有一個div模仿影子，它的寬度爲300像素的和高度100像素，那麼，你就是無法實現與效果：

background: radial-gradient(70% 10%,gray 20%, white 60%); 
background-position: 0px -54px; 
background-size: 100% 110%; 

這裏是例子 - >enter link description here