1
我正在尝试制作一个标题,它超出了我的侧边栏边界,并具有使其看起来像书签的阴影图像。元素对齐问题 - 负边距,图像等
事情与此类似:http://inelmo.com/images/img2.png
现在,我已经尽了全力,但它不是在寻找正确的。这里是我的侧边栏和标题的代码我认为应该努力做出这种效果,但事实并非如此。
HTML
<!-- Sidebar -->
<aside id="sidebar">
<!-- header div -->
<div id="sideProfile">
<!-- Span with image background -->
<span id="sideHshadow"></span>
</div>
</aside>
CSS
#sidebar {
padding: 15px;
width: 400px;
}
/*Span with shadow image to make it look like a bookmark */
#SideHshadow {
height: 6px;
width: 12px;
margin: 0 0 -6px 0;
float: right;
background: url("../images/sidebar_header_shadow.png") no-repeat;
}
#sideProfile {
background:#333333;
border-bottom: 1px solid #2d2d2d;
height: 50px;
width: 400px;
margin: 0 -12px 0 0;
box-shadow: 0 1px 2px #77bee6;
-moz-box-shadow: 0 1px 2px #77bee6;
-webkit-box-shadow: 0 1px 2px #77bee6;
-webkit-border-radius: 7px 7px 0 7px;
-khtml-border-radius: 7px 7px 0 7px;
-moz-border-radius: 7px 7px 0 7px;
border-radius: 7px 7px 0 7px;
}
任何人知道如何使它看起来像例子?日Thnx
这里是#sideHshadow背景图片文件:http://inelmo.com/images/sidebar_header_shadow.png
是您在使用正确的html5文档类型?另外,您的浏览器是否支持预留元素? –
是的,我使用的是正确的!doctype和现代浏览器+ IE5的HTML5支持包括在内,我非常有信心,这不是什么原因造成的问题,但我不明白为什么这不起作用的意图,它可以是#sidebar的填充吗?不知道... – Ilja
呃...我们没有图像文件?这是非常困难的工作这样的东西没有所有的部分;) –