Question

我将这个css代码用于盒子阴影，但我只在顶部和底部 Look like this

div#blog-pager {
border-radius: 2px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.35);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.35);
box-shadow: 0 0 3px rgba(0,0,0,.35);}

这种css风格没有影子风格

#blog-pager{background:#fff;clear:both;width:auto;padding:20px;line-height:normal;position:relative;display:block;text-align:right;overflow:visible;margin:20px 0 5px 0}

我不知道上面的代码是否会影响我添加的代码

这是我的博客：Blog

Answer 1

添加保证金：2px到＃blog-pager。因为#main-wrapper有overflow: hidden;

#blog-pager {
box-shadow: 0px 1px 3px rgba(0,0,0,.35);
margin: 2px;
 }

Answer 2

需要稍微更改你的CSS

div#blog-pager {
  border-radius: 2px;
  -webkit-box-shadow: 0 0 3px 3px rgba(0,0,0,.35);
  -moz-box-shadow: 0 0 3px 3px rgba(0,0,0,.35);
  box-shadow: 0 0 3px 3px rgba(0,0,0,.35);
}

box-shadow中的每个值表示

first : offset-x second: offset-y third : blur-radius fourth: spread-radius last: color

了解更多信息read here

Answer 3

您可以尝试将一些展开半径作为第四个属性添加到box-shadow

box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.75);

箱子阴影两侧都没有显示

3 个答案: