如何用css完成下面的浮雕效果

Question

该图像与纯CSS具有相同的效果吗？它不一定是完美的匹配，但是足够接近的东西，所以我不必依赖这样的图像......

感谢。看起来渐变角度的亮度朝向边缘切割......并且相同的光线渐变从顶部向下几个像素......

Answer 1

没有css渐变，这里有浮雕的东西，但不是你的例子中的斜角：

<div style="background:#1d1d88;width:200px;height:50px;border-radius:10px;box-shadow: inset 0px -5px 20px 8px #060618;"></div>

最好有一点边框半径。如果您想添加渐变，我建议http://www.colorzilla.com/gradient-editor/

这是一个带渐变的快速类：

.bevelish {
    width: 200px;
    height: 50px;
    box-shadow: inset 0px -5px 30px 3px #000052;
    background: #2f2e59;
    background: -moz-linear-gradient(top, #2f2e59 40%, #00003d 60%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,#2f2e59), color-stop(60%,#00003d));
    background: -webkit-linear-gradient(top, #2f2e59 40%,#00003d 60%);
    background: -o-linear-gradient(top, #2f2e59 40%,#00003d 60%);
    background: -ms-linear-gradient(top, #2f2e59 40%,#00003d 60%);
    background: linear-gradient(to bottom, #2f2e59 40%,#00003d 60%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2e59', endColorstr='#00003d',GradientType=0 );
}

关键是盒子阴影中的插图，我也相信你可以添加第5个参数，一个像素值，用于阴影的强度，这样你就可以玩这些值并尝试接近斜面，但我不确定你能否把它变成“尖锐”的斜角。