首页 > 教程 > 关键词   >  CSS3最新资讯  > 正文

CSS3 PK Photoshop：圆角和框投影

2012-04-26 17:49 · 稿源：站长之家

第四步：写CSS代码

现在我们跳转到CSS代码实现部分，首先，设置位置和高度。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*Sample Navigation Bar*/
nav.horizontal{
}
 
nav.horizontal h3{
    padding-bottom:20px;
}
 
nav.horizontal ul{
    height:50px;
}
 
nav.horizontal ul li{
    list-style:none;
    display:inline;
    float:left;
}
 
nav.horizontal ul li a{
    display:block;
    height:28px;
    margin:2px 6px 2px 6px;
    padding:15px 20px 0px 20px;
}
 
nav.horizontal ul li a:hover{
}

然后进行渐变填充：

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
nav.horizontal{
}
 
nav.horizontal h3{
padding-bottom:20px;
}
 
nav.horizontal ul{
height:50px;
 
background-image:-moz-linear-gradient(top, #93C204, #608009);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
 
border:1px solid #608009;
}
 
nav.horizontal ul li{
list-style:none;
display:inline;
float:left;
}
 
nav.horizontal ul li a{
display:block;
height:28px;
margin:2px 6px 2px 6px;
padding:15px 20px 0px 20px;
 
font-size:12px;
font-weight:bold;
color:#FFF;
text-transform:uppercase;
text-decoration:none;
 
border:1px solid transparent;
background-image:none;
}
 
nav.horizontal ul li a:hover{
background-image:-moz-linear-gradient(top, #161616, #2B3615);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
 
border:1px solid #A3D804;
}

接下是，制作圆角：

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
nav.horizontal{
}
 
nav.horizontal h3{
padding-bottom:20px;
}
 
nav.horizontal ul{
height:50px;
 
background-image:-moz-linear-gradient(top, #93C204, #608009);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
 
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
 
border:1px solid #608009;
}
 
nav.horizontal ul li{
list-style:none;
display:inline;
float:left;
}
 
nav.horizontal ul li a{
display:block;
height:28px;
margin:2px 6px 2px 6px;
padding:15px 20px 0px 20px;
 
font-size:12px;
font-weight:bold;
color:#FFF;
text-transform:uppercase;
text-decoration:none;
 
border:1px solid transparent;
background-image:none;
 
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
 
nav.horizontal ul li a:hover{
background-image:-moz-linear-gradient(top, #161616, #2B3615);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
 
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
 
border:1px solid #A3D804;
}

最后，添加框效果：

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
nav.horizontal{
}
 
nav.horizontal h3{
    padding-bottom:20px;
}
 
nav.horizontal ul{
    height:50px;
 
    background-image:-moz-linear-gradient(top, #93C204, #608009);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
 
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
 
    border:1px solid #608009;
 
    box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
}
 
nav.horizontal ul li{
    list-style:none;
    display:inline;
    float:left;
}
 
nav.horizontal ul li a{
    display:block;
    height:28px;
    margin:2px 6px 2px 6px;
    padding:15px 20px 0px 20px;
 
    font-size:12px;
    font-weight:bold;
    color:#FFF;
    text-transform:uppercase;
    text-decoration:none;
 
    border:1px solid transparent;
    background-image:none;
 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
 
nav.horizontal ul li a:hover{
    background-image:-moz-linear-gradient(top, #161616, #2B3615);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
 
    border:1px solid #A3D804;
 
    box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
    -moz-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
    -webkit-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
}

点击查看：演示地址

第五步：去掉溢出颜色

最后一点需要注意的是，使用了填充和边框的圆角的会造成颜色溢出。你会在鼠标悬停在导航栏按钮时看到颜色溢出。

我们可以通过背景剪切属性进行修复，这取决于给定元素背景是否扩展了边框。默认是border-box，造成混乱得颜色溢出，但是我们可以把它改为padding-box，

把下面的CSS代码添加到按钮上：

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
nav.horizontal ul li a{
    display:block;
    height:28px;
    margin:2px 6px 2px 6px;
    padding:15px 20px 0px 20px;
 
    font-size:12px;
    font-weight:bold;
    color:#FFF;
    text-transform:uppercase;
    text-decoration:none;
 
    border:1px solid transparent;
    background-image:none;
 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
 
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

当鼠标悬停时，得到更符合我们要求的效果：

总结

用CSS3创建一个漂亮的，简洁的导航栏比以前更简单，更快。下一次设计中赶紧试试吧。希望本教程对你有帮助，谢谢！

点击查看：演示地址

注明：本文由站长之家编辑编译，未经允许不得转载，如需转载请联系pj@chinaz.com。

（VIA：tutsplus 编译：jasming）

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*Sample Navigation Bar*/
nav.horizontal{
}
 
nav.horizontal h3{
    padding-bottom:20px;
}
 
nav.horizontal ul{
    height:50px;
}
 
nav.horizontal ul li{
    list-style:none;
    display:inline;
    float:left;
}
 
nav.horizontal ul li a{
    display:block;
    height:28px;
    margin:2px 6px 2px 6px;
    padding:15px 20px 0px 20px;
}
 
nav.horizontal ul li a:hover{
}
上一页1234

（举报）

  • 相关推荐
  • 大家在看
关键词：

这篇文章对你有价值吗？

今日大家都在搜的词：

热文

  • 3 天
  • 7天

站长商机

广告

商务合作 侵权投诉 广告服务 版权声明 招聘

©CopyRight 2002-2020 CHINAZ.COM