172月

导航条固定置顶＋背景渐变＋投影的css代码

前端开发DIV+CSS, 设计开发工具

实现效果导航条固定置顶，导航背景渐变，并且有个投影。
今天看了qq for mac 界面的一个导航条固定置顶，并且背景颜色渐变，还有一个阴影，对于浏览器的兼容也做的不错，就copy下来了，留做备用。看效果：

上代码：

.top {background:#fff;
	background:#FBFBFB;
	background:-moz-linear-gradient(top, #FBFBFB 0%, #DADADA 100%);
 /* FF3.6+ */  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #FBFBFB), color-stop(100%, #DADADA));
 /* Chrome,Safari4+ */ 
	background:-webkit-linear-gradient(top, #FBFBFB 0%, #DADADA 100%);
 /* Chrome10+,Safari5.1+ */ 
	background:-o-linear-gradient(top, #FBFBFB 0%, #DADADA 100%);
 /* Opera11.10+ */ 
	background:-ms-linear-gradient(top, #FBFBFB 0%, #DADADA 100%);
 /* IE10+ */ 
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#DADADA',GradientType=0 );
	background:linear-gradient(top, #FBFBFB 0%, #DADADA 100%);
 /* W3C */ 
	-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.6);
	-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.6);
	box-shadow:0 0 10px rgba(0, 0, 0, 0.6);
	position:relative;
    height: 25px;
	padding-top:4px;
    position: fixed;
    width: 100%;
    z-index: 999999;}

主要看以下渐变的语法

/* 语法，参考自: http://webkit.org/blog/175/introducing-css-gradients/ */ 
-webkit-gradient(< type >, < point > [, < radius >]?, < point > [, < radius >]? [, < stop >]*)
/* 实际用法... */ background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

解析一下

渐变的类型? (linear)
渐变开始的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
开始的颜色? (from(red))
结束的颜色? (to(blue))


分享到：



更多相关文章

No comments

星期五, 2月 17th, 2012 | 分类：前端开发DIV+CSS, 设计开发工具 | RSS 2.0 | 留言/评论 | Trackback

留言