我尝试为div元素添加阴影.但只有div的宽度的90％和边距 – 从10％左侧.这是尝试
<div id="post-headline">
<div id="post-headline-date">33.12</div>
<div id="post-headline-title"><?php the_title(); ?></div>
<div id="post-headline-author"><?php the_author(); ?></div>
<div id="shadow"></div>
</div>
CSS
#shadow{
position:relative;
height:5px;
z-index:0;
width:96%;
left:3.7%;
top:-6px;
-moz-box-shadow: 0px 5px 4px #888;
-webkit-box-shadow: 0px 5px 4px #888;
box-shadow: 0px 5px 4px #888;
}
但似乎百分比值不属于“标题后”的大小.在不同的屏幕分辨率上有不同的值.我究竟做错了什么？
例：
RES1：
> —————-标题
> ————影子
RES2：
> —————-标题
> —————–影子
UPDATE
我的CSS
#post-headline {
position:relative;
background-color: #3366cc;
color:#fff;
left:-60px;
height: 40px;
width: 106.5%;
z-index:1;
}
#post-headline:after{
content: " ";
position:absolute;
width: 95.7%;
right: 0;
bottom: 0;
height: 20px;
-moz-box-shadow: 0px 5px 4px #888;
-webkit-box-shadow: 0px 5px 4px #888;
box-shadow: 0px 5px 4px #888;
}
#post-headline-title {
margin-left: 60px;
}
#post-headline-author{
font-weight:bold;
margin-left:60px;
}
#post-headline-date{
position:absolute;
margin:8px;
font-weight:bold;
font-size:12px;
}
#post-headline-triangle
{
z-index:-1;
left: -51.7px;
top:-31px;
height:45px;
width:45px;
background-color:#0033cc;
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
我的PHP
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-headline">
<div id="post-headline-date">33.12</div>
<div id="post-headline-title"><?php the_title(); ?></div>
<div id="post-headline-author"><?php the_author(); ?></div>
</div>
<div id="post-headline-triangle"></div>
...
<?php endwhile;endif; ?>
</div>
仍然不起作用：/
解决方法
你可以这样做：
http://codepen.io/pageaffairs/pen/DAvoj
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {margin: 0; padding: 0;}
#post-headline{
position:relative;
background: white;
}
#post-headline:after{
content: " ";
position:absolute;
width: 90%;
right: 0;
bottom: 0;
height: 20px;
z-index:-1;
-moz-box-shadow: 0px 5px 4px #888;
-webkit-box-shadow: 0px 5px 4px #888;
box-shadow: 0px 5px 4px #888;
}
</style>
</head>
<body>
<div id="post-headline">
<div id="post-headline-date">33.12</div>
<div id="post-headline-title"><?php the_title(); ?></div>
<div id="post-headline-author"><?php the_author(); ?></div>
</div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。