如何創建徑向css3邊框漸變陰影

我有兩列可以伸展到可變高度，設計師希望在兩列之間有一個陰影，但正如您可以看到圖像在頂部淡出並且底部。這意味着我不能只使用右側列中左對齊的css使用背景圖像。如何創建徑向css3邊框漸變陰影

Columns with a radial shadow in between

於是我雖然也許我可以使用具有徑向漸變的CSS 3邊界的影子。我可能會使用表格單元來做到這一點，因爲我需要陰影伸展到最高列的高度。我該怎麼做呢？

來源

2012-10-30 superlogical

以前的答案並沒有真正回答你的問題：「如何創建一個CSS3徑向漸變邊框陰影」

可以使用徑向漸變來模擬邊框陰影沒有圖像。

演示：http://jsfiddle.net/sonic1980/wRuaZ/

enter image description here

background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%); 
            |  |  |  | 
            |  |  |  +--> color end  
            |  |  +--> color start 
            |  +--> size of gradient ellipse (x-axis, y-axis) 
            +---> position of ellipse center

可以很容易地修改，使之垂直或使用實現：之前或者：僞類之後。

另一個例子，一個<hr>標籤與陰影：http://jsfiddle.net/sonic1980/65Hfc/

來源

2012-11-14 22:36:17 Peter

尼斯的答案，彼得，但它對瀏覽器的要求相當激烈:) – jmeas

用'徑向梯度（橢圓最遠側在50％0％，rgba（0,0,0， 0。3）0％，rgba（0,0,0,0）100％）'以使其以標準和跨瀏覽器的方式工作。 – Xufox

我有一個建議，你不需要使用css3，你可以使用兩個不同的類，一個是正常的，另一個是背景。當加載頁面完成，並調用js方法，settimeout幾秒鐘，切換類。

來源

2012-10-30 07:56:25 lioncin

我想我只是要使用的圖像，並設置一個最小高度的DIV :-)

.column.right { 
    padding-left: 30px; 
    background: url(/img/shadow.png) no-repeat left top; 
    min-height: 265px; 
}

來源

2012-10-30 08:02:24 superlogical

另一種解決辦法實際上允許一個動態的高度欄，但它只有IE8 +支持。

你要做的是應用定位到最高列邊緣的background-image。然後，您可以使用:before和:after僞元素，分別設置absolute位置top:0;和bottom:0，以設置陰影上的「上限」。

這有道理嗎？這裏有一個JSFiddle，它使用邊框和文字來顯示它，而不是圖像。

當然，JSFiddle中的div的height參數是無關緊要的;它可能是min-height或不存在。我只是把它設置爲div一些大小。

來源

2012-10-30 08:09:06 jmeas

所以會在他們之後像面具行動之前，並有逐漸減少的陰影使用背景圖片？這很酷:)你也可以只添加額外的divs，少語義，仍然使用絕對定位 – superlogical

是的，你有想法。使用更多'div'使其失去語義能力，但確實給了它更深的'IE'支持，這可能是值得的！ – jmeas

如何創建徑向css3邊框漸變陰影

回答

相關問題