衰落边框（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）

回答

相关问题