css - 如何用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 个参数，一个像素值，用于阴影强度，因此您可以使用这些值并尝试接近斜面的东西，但我我不确定你能不能把它做成一个“锋利”的斜角。