CSS样式如何实现Logo立体盒子效果

作者佚名技术来源 CSS编程浏览发布时间 2012-05-26

让我们看一下该如何实现立体盒子的效果吧，然后，我们将会给大家展示一些很好的例子。

准备先准备好你的页面和图片，我们使用这张图片：

我们简单的将HTML写成这样:

CSS样式可能会是这个样子的:

body{background:#999;}

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
}

下面是一个效果预览：

设置为相对定位，当我们定位logo的时候，我们希望它的位置是相对于容器的，因此使用相对定位：

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
position:relative;
}

将它定位到盒子的外面现在你需要做的就仅仅是定位logo，将其水平定位，让它从容器中突出出来。

#logo{
position:absolute;
left:-15px;
}

现在，我们就可以看到，logo已经显示在盒子之外了。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS控制H1不换行下一篇: CSS分栏布局的方法:绝对定位和浮动

关于CSS样式如何实现Logo立体盒子效果的所有评论

随机推荐