首页 > 教程 > 关键词   >  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

（举报）

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

  • Photoshop测试版推出AI图像生成功能：用户仅需提供简单文本

    AdobePhotoshop的最新测试版现已引入一项革命性的功能，允许用户通过简单的文本提示，利用人工智能技术生成图像。该功能的核心在于Adobe新发布的生成式AI模型系列FireflyImage3。包括谷歌和微软在内的多家科技巨头都在AI领域取得了显著的进展和突破。

  • Photoshop重大更新！集成Adobe Firefly Image 3 Model 图像灵活度提升

    AdobePhotoshop迎来了一次重大更新，通过集成AdobeFireflyImage3Model，引入了多项新的AI功能，这些功能大幅提升了图像编辑的深度与灵活性。这次的更新不仅优化了图像生成的过程让用户能够以前所未有的控制度和精准度实现其创意构想。这些新的AI功能的引入，无疑将为Photoshop用户带来更高效、更精准的图像编辑体验。

    ​Photoshop ​AI头条

  • 谷歌推出3款免费 AI 图像编辑工具，Magic Editor、Photo Unblur 和 Magic Eraser

    2023年10月4日，谷歌宣布将从5月15日起向所有谷歌相册用户免费提供三款生成式AI图像编辑工具:MagicEditor、PhotoUnblur和MagicEraser。MagicEditor能够轻松实现一键PS、调色和光影效果，让用户更加便捷地编辑图片。这也意味着用户无需再局限于专业的图片编辑软件，通过谷歌的AI工具，即可轻松实现多样化的编辑需求。

    ​谷歌 ​AI图像编辑 ​AI头条

  • 把握TikTok Shop机遇，PingPong助力卖家跑出“跨境增长新速度”

    TikTok在海外市场的惊人表现，让人们不禁为之侧目。这个社交媒体平台不仅数据强悍已经成为全球备受喜爱的社交平台之一。PingPong将助力卖家找到新的发力点，抓住全球化发展的新商机。

    ​TikTok ​电商 ​海外市场

  • PingPong重磅上线TikTok Shop平台收款,致力出口卖家捕获全球机遇

    随着数字技术对经济贸易的影响深入，数字贸易所触及的服务模式和业态趋势愈发朝着高附加值、高技术含量、自动化定制化方向发展，全球化贸易程度也进一步加深。以跨境电商为代表的贸易新业态增长势头强劲，在我国稳外贸建设中发挥着愈发重要的作用。PingPong将继续拓展数字服务在跨境支付领域中的创新运用，帮助更多的出口卖家实现数字化协同发展。

    ​数字贸易 ​跨境电商 ​第三方支付

  • COOC回顾丨大咖解读童享临床数据&WORKSHOP直观定制离焦效果

    4月11日，备受瞩目的第二十四届国际眼科学学术会议暨2024第十一届国际角膜塑形学术论坛在上海盛大开幕。此次盛会汇聚了全球眼科领域的顶尖专家、学者及业界精英，共同探讨眼科技术的创新与发展动向。”童享将不断深耕近视防控领域，持续性投入产品与技术的研发及拓展，为有“近视管理”需求的青少年提供更好的视觉体验和服务，共同塑造他们的新“视”界。

    ​眼科技术 ​角膜塑形 ​童享

  • PingPong策展TikTok Shop跨境招商开年大会 | 助力跨境卖家抢占新蓝海

    作为海外市场不容小觑的流量池，月活人数超10亿次的TikTok有着巨大发展潜力。凭借个性化的内容推荐和多元化的变现方式加持，TikTok有潜力成为跨境电商和外贸新业态增长的“流量风口”。期待能够有越来越多的跨境电商卖家能够抓住时代机遇，走出国门迈向新蓝海。

    ​TikTok ​跨境电商 ​流量风口

  • 携手TikTok Shop开展跨境招商大会，助力出海卖家抢占全球商机

    凭借高度年轻化的人口结构，东南亚逐渐成为全球经济增长最快的地区之一。聚焦年轻化市场带来的电商发展势能，据谷歌、淡马锡与贝恩联合发布的《2022东南亚数字经济报告》显示，2017至2022年的五年间，东南亚电商GMV从109亿美元跃升至1310亿美元，年复合增长率高达64%。围绕全球电商新浪潮，PingPong邀请50行业大咖亲临现场分享成功案例，深度分享并解读前沿运营策略，并聚

    ​东南亚电商 ​社交电商 ​跨境支付

  • PingPong携手TikTok Shop推出跨境全站点收款,助力卖家实现业务全球增长

    自2021年TikTokShop进入印度尼西亚和英国市场后，在新加坡、越南、马来西亚、泰国、菲律宾等新兴市场TikTokShop也随之开辟出了新空间。去年9月，TikTokShop正式上线美国市场，11月，在黑色星期五和网络星期一双重促销的推动下，超过500万名美国新客户涌入TikTok购买商品。值得一提的是，为助力广大跨境卖家更进一步拓展在TikTokShop平台上的贸易机遇，3月28日，由PingPong携手TikTokShop倾力策展的TikTokShop跨境电商招商开年大会将于厦门隆重启幕，届时将围绕全球电商新浪潮，邀请行业专家深度解读TikTokShop成功案例，并分享前沿运营策略，以全面助力广大跨境卖家获得出海更多出海竞争力!此外，为助力卖家在TikTokShop平台上的高效出海，PingPong还将为此次合作推出多重福利:新入驻TikTokShop的店铺绑定PingPong后，即可畅享免费提现6个月，每周绑店数量前10名再得1万美元没费提现劵，每周入账金额前10名再得1万美元免费提现劵;每天还可进行抽奖，最高可赢取华为Mate60/全年免单机会，不容错过。

    ​TikTok ​Shop ​跨境支付

  • 由WotoKOL卧兔主办的TikTok Shop跨境电商2024宁波首场招商峰会璀璨收官

    4月24日，“百业万品·助无忧出海”TikTokShop跨境电商2024年度宁波首场招商峰会在卧兔网络的专业操持与TikTokShop的特邀参与下，完美收官。此次盛会汇聚了众多行业协会、优质服务商、品牌卖家及跨境从业者共襄盛举，共绘全球电商新版图。共绘全球电商蓝图至此，百业万品·助无忧出海TikTokShop跨境电商2024宁波首场招商峰会璀璨收官，感谢协办单位:宁波市跨境电子商务协会、宁波市北仑区商务促进协会、宁波市海曙区跨境电子商务协会、宁波市鄞州汽车零部件国际商会、宁波市家居产业协会、宁波文具行业协会、叄航科技、赛狐ERP、领星ERP、Qbit的大力支持。

    ​TikTok ​Shop ​跨境电商

这篇文章对你有价值吗？

今日大家都在搜的词：

热文

  • 3 天
  • 7天

站长商机

广告

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

©CopyRight 2002-2020 CHINAZ.COM