这是一个正在逐渐流行的创意的趋势。事实上它非常容易实现,只需要增加了一个额外的元素和独特的设计。
让我们看一下该如何实现立体盒子的效果吧,然后,我们将会给大家展示一些很好的例子。
准备
先准备好你的页面和图片,我们使用这张图片:
我们简单的将HTML写成这样:
<p id="container"> <img id="logo" src=http://www.webjx.com/web/"logo.png" alt="Lee Munroe" /> </p>
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已经显示在盒子之外了。
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索background
, 盒子
, 定位
, logo
, 效果
相对
盒子立体效果图、css实现图片立体效果、网页立体效果、网页实现3d效果、网页实现翻转效果,以便于您获取更多的相关知识。
时间: 2024-09-08 04:49:59