1

我有两个块 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>
4

6 回答 6

0

您可以使用 CSS 阴影。

看这里这对你有帮助

于 2013-04-08T09:41:57.640 回答
0

只需使用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

于 2013-04-08T09:42:03.583 回答
0

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

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

请检查教程。并使用box-shadow 样式生成器尝试在线样式

于 2013-04-08T09:44:59.913 回答
0

请尝试此代码。它在 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>
于 2013-04-08T09:50:33.703 回答
0

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

要实现看起来与图像上完全相同的阴影，它只出现在 box 的左侧，一种方法是包含一个额外的 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/

于 2013-04-08T09:54:47.583 回答
0

简单但不完美的方法：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);
}
于 2013-04-08T09:55:53.073 回答