位置、阴影、宽度、具体宽度的位置盒阴影

Question

位置、阴影、宽度、具体宽度的位置盒阴影

8

我尝试为一个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;
}

但似乎百分比值不属于“post-headline”的大小。在不同的屏幕分辨率上，其值是不同的。我做错了什么？

例如：

----------------标题
------------ 阴影

res2：

---------------- 标题
----------------- 阴影

更新：我的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>

还是没起作用 :/

- Lucas

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ralph.m · Accepted Answer

你可以这样做：

请访问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>