衰落邊框（CSS）

以下是我與工作的圖片：衰落邊框（CSS）

我需要的垂直菜單欄下方的邊框（左側）淡出（一會和一個下降）。我將如何讓這兩個邊框淡出？現在看起來有點塊。我更喜歡不使用JavaScript，但我可能會做必要的事情（我試圖使網站儘可能輕量級）。

編輯

淡入，我的意思了空間，而不是時間。

來源

2011-05-25 FreeSnow

你是否試圖用css動畫淡入淡出？ – Ibu 2011-05-25 18:25:59

我認爲他正在談論一個靜態的淡出，讓它看起來很吸引人。 – Alp 2011-05-25 18:28:04

如果這個問題不需要鏈接就可以解釋問題，那麼對於未來的訪問者來說，這個問題會更有用。一旦在頁面上解決了問題，鏈接將不再顯示問題。 – KatieK 2011-05-25 19:29:51

您可以使用兩種淡出視頻圖像作爲background-image

li.edge_top, li.edge_bottom { 
    background-position: right; 
    background-repeat: no-repeat; 
} 

li.edge_top { 
    background-image: url:('fadeout_top.png'); 
} 

li.edge_bottom { 
    background-image: url:('fadeout_bottom.png'); 
}

來源

2011-05-25 18:25:05 Alp

爲了防止加載太大的圖像分辨率（可能是浪費）或太小（低質量），我應該製作多大的圖像？ – FreeSnow 2011-05-25 18:30:48

您可以將它設置得如同您想讓它出現在屏幕上一樣高。您可以將元素的高度作爲度量。寬度應與菜單元素的邊框寬度相同。 – Alp 2011-05-25 18:33:08

您可以製作一串1px高的塊，並依次打印更亮的邊界 - 右側顏色。

（假設你的意思是「變臉」，如在空間，而不是時間）

來源

2011-05-25 18:24:45 dkamins

+1空間過大，而不是時間 – Ibu 2011-05-25 18:27:53

-1

這將刪除它，這些僞元素不支持在舊的瀏覽器

ul.vertical_menu > li:first-child { 
    border-right:none; 
} 
ul.vertical_menu > li:last-child { 
    border-right:none; 
}

http://jsfiddle.net/5Ceb5/

來源

2011-05-25 18:30:16 sathishn

他不想刪除它們。 – Alp 2011-05-25 18:31:35

我希望他們在那裏。我只希望它們在菜單中離開時會變淡... – FreeSnow 2011-05-25 18:32:57

給出背景並將其對齊到右側，因爲邊框不能是漸變，此類可能具有-1px的右邊距，所以背景適合於其他邊界 – sathishn 2011-05-25 18:46:42

你可以嘗試新的CSS3 border-right-image屬性（http://www.css3.info/preview/border-image/）和一個高度漸變的PNG。但是，這在大多數瀏覽器中都不會得到廣泛的支持。你可能是去創建與右邊的漸變的圖像，並將其設置爲background-image上.edge_bottom和.edge_top CSS類越好（請務必從這些課程中移除現有的邊界，太）

來源

2011-05-25 18:30:51 digitalbath

CSS3漸變來救援！

Live Demo

注：梯度僅設置爲Firefox瀏覽器。我無法測試Webkit，但應該幾乎相同。

來源

2011-05-25 18:47:17 drudge

你也可以用邊框來做這個嗎？ – Alp 2011-05-25 20:43:44

@Alp：那是我最初看的，發現實現[相當有限]（http://jsfiddle.net/G7Jdx/）。 – drudge 2011-05-25 22:50:28

感謝您舉個例子。是的，看起來像使用border-image是CSS3的方式去。 – Alp 2011-05-25 23:31:20

衰落邊框（CSS）

回答

相關問題