Question

如何沿着会合点边界无缝混合两个div的颜色？基本上寻找将在它们之间滚动的渐变。 CSS，JavaScript，挑选你的毒药。显然是CSS的奖励积分。

尝试了盒子阴影，但是我无法像我想的那样在他们的会面边缘控制它，加上它全身都流血。

div:nth-child(1) {
    background: skyblue;
    height:150px;
    width:300px;
    margin:0 auto;
}
div:nth-child(2) {
    background: black;
    height:150px;
    width:300px;
    margin:0 auto;
}

Answer 1

这个片段可能会引发某些事情。

div:nth-child(1) {
  color: skyblue;
}
div:nth-child(2) {
  color: black;
}
div {
  position: relative;
  background: currentColor;
  height: 150px;
  width: 300px;
  margin: 0 auto;
}
div:before {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  transform: translateY(-50%);
  background: linear-gradient(currentColor, transparent);
  pointer-events: none;
}

<div></div>
<div></div>

Answer 2

我认为你可以让每个div成为一个单独的渐变。你可以将Div 1从蓝色中间淡入蓝色和蓝色中间，而Div 2从中途淡入淡出到黑色。然后，只要div的边缘排成一行，就可以了！

您可以使用我上面提到的渐变效果。

这是我的代码。我使用十六进制颜色选择器来获取中间颜色的值。此版本仅适用于safari，但您可以将其更改为适用于所有浏览器。

div:nth-child(1) {
    background: -webkit-linear-gradient(skyblue, #000066);
    height:150px;
    width:300px;
    margin:0 auto;
}
div:nth-child(2) {
    background: -webkit-linear-gradient(#000066, black);
    height:150px;
    width:300px;
    margin:0 auto;
}

Answer 3

它必须是两个div的混合吗？或者你可以使用这样的东西，一个梯度div和两倍的高度？

div:nth-child(1) {
    background: linear-gradient(skyblue, black)
    height:300px;
    width:300px;
    margin:0 auto;
}

这可能会有所帮助：http://www.w3schools.com/css/css3_gradients.asp

Answer 4

途中可以使用像rgb(71, 109, 124)

这样的中间色

并将linear-gradient()设置为background：

div:nth-child(1) {
    background: linear-gradient(skyblue 95%, rgb(71, 109, 124));
    height:150px;
    width:300px;
    margin:0 auto;
}
div:nth-child(2) {
    background: linear-gradient(rgb(71, 109, 124), black 5%);
    height:150px;
    width:300px;
    margin:0 auto;
}

在他们的会面点混合两个div

4 个答案: