【问题标题】:How to set a box-shadow to the div element to all sides, left-shadow, right-shadow, top-shadow, bottom-shadow?如何为div元素设置一个box-shadow到所有边,left-shadow,right-shadow,top-shadow,bottom-shadow?
【发布时间】:2011-11-16 11:28:15
【问题描述】:

我无法创建另一个父 div 容器,它可能只使用 css 技巧吗? 盒子阴影:7px 7px 7px 黑色; 只会从右边框和下边框创建阴影,但我也需要左边框和上边框。

【问题讨论】:

  • 四面八方的阴影?为什么不能简单地使用边框或图像来创建这种效果?我不确定是否可以在一个 div 上组合两个阴影。
  • '因为我的背景颜色会随着动画而动态变化,这不是一个好工作。
  • 部分透明的背景图片作为阴影?

标签: styles css


【解决方案1】:

盒子阴影有4个参数;偏移、模糊半径、散布和颜色。

这是我在我的网站上使用的代码。它会生成一个偏移为 0 且模糊半径为 0、散布为 8px 和灰色阴影的阴影。

 box-shadow: 0 0 8px #888888;
-moz-box-shadow: 0 0 8px #888888;
-webkit-box-shadow: 0 0 8px #888888;

这里是一个图像效果的简单示例。

http://www.css3.info/preview/box-shadow/

【讨论】:

    【解决方案2】:

    试试这个

    box-shadow:2px 2px 10px 10px #C9C9C9;
    -webkit-box-shadow:2px 2px 10px 10x #C9C9C9;
    -moz-box-shadow:2px 2px 10px 10px #C9C9C9;
    

    您可以使用shadowOn。这是一个很棒的 jquery 插件,使用起来非常简单。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-02-08
      • 1970-01-01
      • 1970-01-01
      • 2019-04-25
      • 2020-05-09
      相关资源
      最近更新 更多