Question

我有两个街区 http://imageshack.us/a/img203/9351/555el.png

我如何在这些块之间创建渐变 http://imageshack.us/a/img521/1866/8585.png

这是我的CSS和HTML代码

<style type="text/css">
  div.fx6p1 {
  width: 580px;
  height: 721px;
  background: #EDEDED;
  margin: 40px 0 0 40px; 
  padding: 9px;
  }
div.fx6Ra {
    width: 200px;
    background: #333333;
    height: 560px;
    margin: 170px 0 0 589px;
}
</style>
<div class="fx6p1">
  <div class="fx6Ra">
  </div>
</div>

Answer 1

您可以使用CSS阴影。

看here这可能会对您有所帮助

Answer 2

只需使用box-shadow：

div.fx6Ra {
    width: 200px;
    background: #333333;
    height: 560px;
    margin: 170px 0 0 589px;
    box-shadow: -8px 0px 8px 1px #888;
}

box-shadow具有以下值：

box-shadow: x y blur spread color;

的 Working Demo

Answer 3

CSS3“box-shadow”样式属性将有助于满足您的要求。 box-shadow属性的语法是

box-shadow: h-shadow v-shadow blur spread color inset;

请查看tutorial。并使用box-shadow style generator

在线尝试这种风格

Answer 4

请尝试此代码。它在Firefox和Chrome中运行，我查了一下。

<style type="text/css">
  div.fx6p1 {
  width: 580px;
  height: 721px;
  background: #EDEDED;
  margin: 40px 0 0 40px; 
  padding: 9px;
  }
div.fx6Ra {
    width: 200px;
    background: #333333;
    height: 560px;
    margin: 170px 0 0 589px;
    box-shadow: -10px 0 4px 0 #888888;
}
</style>
<div class="fx6p1">
  <div class="fx6Ra">
  </div>
</div>

Answer 5

从您在示例中提到的重点（http://imageshack.us/a/img521/1866/8585.png），我假设您实际上是在谈论投影。

要获得与图像完全相同的阴影，它只出现在框的左侧，一种方法是包含一个额外的div。

<强> HTML：

<div class="fx6p1">
    <div class="fx6Ra">
        <div class="dropshadow-leftonly"></div>
    </div>
</div>

<强> CSS：

div.fx6p1 {
    width: 580px;
    height: 721px;
    background: #EDEDED;
    margin: 40px 0 0 40px;
    padding: 9px;
}
div.fx6Ra {
    position: relative;
    margin: 170px 0 0 579px;
    overflow: hidden;
    display: block;
    width: 210px;
    height: 560px;
}
.dropshadow-leftonly {
    display: block;
    width: 200px;
    height: 560px;
    background: #333333;
    box-shadow: 0px 0px 5px 5px #ababab;
    float: right;
}

以下是一个有效的示例： http://jsfiddle.net/shodaburp/A4c4p/

Answer 6

简单但不完美的方式：box-shadow

http://jsfiddle.net/yA3CX/

div.fx6Ra {
    box-shadow:-10px 0px 25px #404040;
}

很难：::before和line-gradient

<击> http://jsfiddle.net/yA3CX/2/

<击>

div.fx6Ra:before,
div.fx6Ra::before {
    content:' ';
    display:inline-block;
    position:absolute;
    top:219px;
    left:633px;
    height:560px;
    width:15px;
    background-image:-webkit-linear-gradient(right,black,transparent);
    background-image:-moz-linear-gradient(to left,black,transparent);
    background-image:-ms-linear-gradient(to left,black,transparent);
    background-image:-o-linear-gradient(to left,black,transparent);
    background-image:linear-gradient(to left,black,transparent);
}

<击>或

http://jsfiddle.net/yA3CX/3/

div.fx6Ra:before,
div.fx6Ra::before {
    content:' ';
    display:inline-block;
    position:relative;
    top:0px;
    left:-15px;
    height:560px;
    width:15px;
    background-image:-webkit-linear-gradient(right,black,transparent);
    background-image:-moz-linear-gradient(to left,black,transparent);
    background-image:-ms-linear-gradient(to left,black,transparent);
    background-image:-o-linear-gradient(to left,black,transparent);
    background-image:linear-gradient(to left,black,transparent);
}

我如何在两个div之间创建正确的渐变

6 个答案: