我怎样才能将两个div的颜色无缝地混合在它们的集合点边界上?基本上是找一个在它们之间滚动的梯度。CSS,JavaScript,选你的毒药。很明显CSS的加分。
试过盒子阴影,但我不能真正控制他们的会议边缘,因为我想,加上它流血了所有。
http://jsfiddle.net/q131p8w2/2/
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;
}
最佳答案
这个片段可能会导致一些事情。
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>
关于javascript - 在他们的汇合点混合两个div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34958573/