下面这个菜单框用css怎么做出来啊？有渐变效果，里面貌似还有边

html-css013

下面这个菜单框用css怎么做出来啊？有渐变效果，里面貌似还有边,第1张

如果喜欢这些效果的话可以去下JS脚本，很多效果都是通过JS实现的，我经常逛的是http://js.itobe.cn/这个网站，有很多好用的脚本。如果不想花心思研究太多JS的话，下脚本是个不错的选择

圆角DIV的话我可以给你看看我的代码

div { border:1px solid #ccc margin:2em auto 1em max-width:650px min-width:544px -moz-border-radius:20px -webkit-border-radius:20pxheight:300px border-radius:20px}

渐变效果我不是很清楚，不过如果要做到鼠标放到上面变色的话，设置好a:link a:visited a:hover和

a:active前两个背景颜色为蓝色后两个设置成白色就行。

可以自己研究一下

手打有点累啊= =给采纳吧，别破了我的100%采纳

css文件渐变虽然兼容性比较差，但是用在移动端和chrome中还是没有问题的。

实现文件渐变的方法有两种

效果如下

-webkit-background-clip W3C支持的属性说明

但是并没有text 属性，所以这个只能在chrome上看到效果，在其他浏览器没有实现，它的兼容性就有很大的问题了

-webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。

缺点：webkit 内核浏览器特有

效果如下

使用：mask-image

缺点：webkit 内核浏览器特有

采用 svg 方式

实现原理：程序首先算出字体所在容器的高度N，然后清空容器内容，并添加N个span，每个span内容都为原容器的文字，每个span的颜色根据渐变色进行计算，而且其中的文字定位都相比之前一个span的文字向上偏移一个像素。CSS中可以看到，每个span的高度都为1。这样，我们就通过N各不同颜色的1px的span把字体“拼”出来了，然后加上“高光/阴影”就搞定。

可以使用 background-image 属性并指定 linear-gradient 函数。

比如想为文本添加从红色到蓝色的渐变色：

.text {

background-image: linear-gradient(to right, red, blue)

-webkit-background-clip: text

-webkit-text-fill-color: transparent

}

另外，还可以使用其他函数，例如 radial-gradient，以创建径向渐变。

希望这可以帮到你。