css3圆角阴影矩形
本教程将演示如何使用几种组合CSS3样式创建漂亮的，简单的导航栏。 我们的外观是，过去只能通过组合多个图像，JavaScript和多个div来创建。 让我们开始吧…
注意：以下所有示例均已在Mozilla Firefox，Safari和Chrome上进行了测试。 如果您想在IE或任何其他浏览器中获得类似的信息，请留下评论，我们将很乐意为您提供帮助。
开始之前
从网页设计的一开始，美观且设计良好的导航栏便是保持网站井井有条和结构合理的更强大的元素之一。 过去，使用阴影，渐变，圆角和悬停效果创建漂亮的设计需要一系列技巧，这些技巧增加了代码的大小和图像数量。
在本教程中，我们将深入探讨两个非常重要CSS3效果： 圆角和盒子阴影，再加上我们将使用先前在CSS3 vs Photoshop-Complex Backgrounds教程中显示的线性渐变。
步骤1：圆角
每个人都听说过它们，谈论如何创建它们将是多余的，因此在以下示例中，我将重点介绍使用图像创建圆角效果的区别以及使用CSS3的优点和缺点。
在任何图形软件中，创建圆角效果都非常简单，但是在Photoshop中，我们存在一些问题：
准确性：即使可以设置圆角半径，Photoshop的内置抗锯齿引擎也经常在图形中添加一个或两个额外的像素。 过去，我们大多数人都必须手动减少基于不精确图像的圆角的像素，以创建具有干净颜色背景（例如彩色背景）的连接。
编辑：这是创建基于图像的圆角的最大问题之一。 如果您在Photoshop中为半径为10像素的角创建图形，并且由于某些原因需要将半径增大至20像素，则除了重绘形状或手动编辑其所有角，浪费时间和准确性之外，没有其他方法可以这样做。 调整大小是另一个巨大的问题，如果要拉伸或放大形状，则必须使用Photoshop中的“点选择工具”，因为使用“变换控件”可能会导致拐角形状出现不希望的变形。 我什至不必提一下，切角要花很多宝贵的时间。
填充和边界：在基于图像的圆角框内创建渐变填充一直是一项艰巨的任务，即使没有覆盖边界，也需要外科手术的精确度才能对涉及的图像进行切片。 您需要为每个框至少创建3个图像，一个用于顶角，另一个用于底角以及水平或垂直渐变，然后为其编写代码。 图像填充的另一个问题是，容器经常不得不增加其高度或宽度，从而在渐变上获得不良效果（请参见下面的屏幕截图）。
混合角样式：在Photoshop中，创建混合角样式需要花费一些时间，没有组合角样式的选项。 您必须手动减小/增加半径或组合形状...，然后切成每个角。
现在在CSS3中
使用CSS3替换基于图像的经典圆角是一个好主意。 这里有几个优点：
- 它减少了到服务器的图像和HTTP请求的数量
- 它适用于所有现代浏览器（IE 6,7,8除外），包括大多数流行的移动浏览器。
- 您只需要在CSS文件中添加几行内容即可使其正常工作
- 增大/减小半径，调整大小，更改填充和边框仅需几秒钟，而在Photoshop中则需要几分钟
让我们看一下在HTML元素上创建圆角的代码：
/*Rounded Corner Boxes*/
.box{
background-image:-moz-linear-gradient(top, #FAD502, #E89502);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));
}
.fourcorners{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
.topleft{
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-khtml-border-radius-topleft: 20px;
border-top-left-radius: 20px;
}
.bottomleft{
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-khtml-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
}
.topright{
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-radius-topright: 20px;
border-top-right-radius: 20px;
}
.bottomright{
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-khtml-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
}
.asymmetrical1{
-webkit-border-top-left-radius: 160px;
-khtml-border-radius-topleft: 160px;
-moz-border-radius-topleft: 160px;
border-top-left-radius: 160px;
-webkit-border-top-right-radius: 20px;
-khtml-border-radius-topright: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-radius-bottomleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 0px;
-khtml-border-radius-bottomright: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
}
.asymmetrical2{
-webkit-border-top-left-radius: 0px;
-khtml-border-radius-topleft: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
-webkit-border-top-right-radius: 90px;
-khtml-border-radius-topright: 90px;
-moz-border-radius-topright: 90px;
border-top-right-radius: 90px;
-webkit-border-bottom-left-radius: 0px;
-khtml-border-radius-bottomleft: 0px;
-moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 90px;
-khtml-border-radius-bottomright: 90px;
-moz-border-radius-bottomright: 90px;
border-bottom-right-radius: 90px;
}
.circle{
width:170px;
height:170px;
padding:15px;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:12px;
font-weight:bold;
float:left;
background-image:-moz-linear-gradient(top, #FAD502, #E89502);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502));
-webkit-border-top-left-radius: 100px;
-khtml-border-radius-topleft: 100px;
-moz-border-radius-topleft: 100px;
border-top-left-radius: 100px;
-webkit-border-top-right-radius: 100px;
-khtml-border-radius-topright: 100px;
-moz-border-radius-topright: 100px;
border-top-right-radius: 100px;
-webkit-border-bottom-left-radius: 100px;
-khtml-border-radius-bottomleft: 100px;
-moz-border-radius-bottomleft: 100px;
border-bottom-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-khtml-border-radius-bottomright: 100px;
-moz-border-radius-bottomright: 100px;
border-bottom-right-radius: 100px;
}观看演示
步骤2：方块阴影
使用Photoshop可以实现的一些最酷的效果是通过“阴影”和“内部阴影”。 以正确的方式使用它们可以产生出色的3D效果。 当然，以错误的方式使用阴影或内部阴影会很快变成俗气的效果。
以下是一些良好做法的示例：
现在在CSS3中
CSS3允许我们仅用几行代码即可创建阴影，所使用的样式为“盒子阴影”。
要创建类似Photoshop的投影 ，可以使用以下语法：
box-shadow: <xpos> <ypos> <size> <color>;
若要创建类似Photoshop的内部阴影 ，可以使用以下语法：
box-shadow: inset <style> <xpos> <ypos> <size> <color>;
现在，这里是创建Box Shadows的多个变体的代码：
/*Box shadows*/
.dropshadow{
background-image:-moz-linear-gradient(top, #F3F4F5, #C8C9CA);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F4F5), to(#C8C9CA), color-stop(1,#C8C9CA));
border:2px solid #F2F2F2;
box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
}
.innershadow{
background-image:-moz-linear-gradient(top, #E2E2E2, #CCCCCC);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E2E2E2), to(#CCCCCC), color-stop(1,#CCCCCC));
border:2px solid #FEFEFE;
box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);
-moz-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);
-webkit-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25);
}
.intenseshadow{
background-color:#FFF;
border:1px solid #F00;
box-shadow: 10px 10px 0px #F00;
-moz-box-shadow: 10px 10px 0px #F00;
-webkit-box-shadow: 10px 10px 0px #F00;
}
.bevel{
background-color:#CCC;
box-shadow: 10px 10px 0px #F00;
-moz-box-shadow:inset 0px 0px 120px rgba(0,0,0,.60);
-webkit-box-shadow: 10px 10px 0px #F00;
}观看演示
第3步：导航菜单
我们将结合圆角，渐变填充和框阴影来创建导航菜单。 您始终可以从Photoshop开始创建图形。 如果您想直接进入，请从页面顶部获取源代码下载。
有趣的部分是尝试使用CSS3获得相同的结果-我们开始吧！
首先是HTML模型（是的，我使用的是HTML5的“ nav”标签，因为它很酷，并且在语义上也很合适-但您可以改用div）
<nav class="horizontal">
<ul>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Dolor Sit Amet</a></li>
<li><a href="#">Sed do Eiusmod</a></li>
<li><a href="#">Consectetur Adipisicing</a></li>
<li><a href="#">Lipsum amet</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
</nav>步骤4： CSS
现在，让我们跳到CSS。 首先设置位置和高度。
/*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{
}然后添加渐变填充：
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;
}接下来，圆角：
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;
}最后是Box Shadows：
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);
}观看演示
步骤5：修复出血
关于带有填充和边框的圆角的最后一点：它们出血。 您会在我们的导航按钮的悬浮状态下注意到它：
填充超出边界的颜色渗色。
我们可以使用background-clip属性解决此问题，该属性确定给定元素的背景是否延伸到边框中。 默认情况下，它（ border-box ）会这样做，这给我们带来了混乱的局面，但是我们可以将其更改为padding-box ，从而使它不再border-box边界。
让我们在按钮中添加以下css：
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 info上阅读有关background-clip属性的更多信息 。
结论
使用CSS3创建美观，简单的导航栏比以往任何时候都更加轻松快捷，那么为什么不尝试下一个设计呢？ 谢谢阅读！
css3圆角阴影矩形
2549
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
