如何在 CSS 中创建与此类似的效果(右侧的框)?
小问题,但简短是甜蜜的。我会发布我尝试过的代码,但我无法开始淡化整个框,这也足以满足我的目的(我可以在下面添加另一个带有背景的 div,我需要的只是淡化文本)。
使用linear-gradient
with rgba
,从完全不透明度变为 0,颜色相同:
div {
width: 400px;
margin: 20px auto;
background: rgb(163, 182, 245);
padding: 10px;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 80px;
background: linear-gradient(
rgba(163, 182, 245, 1),
rgba(163, 182, 245, 0)
);
}
这是小提琴:http: //jsfiddle.net/HUHKB/
PS不要忘记生产中的供应商前缀......