html - 如何使 Div 框看起来像 3D

Question

这是我目前所拥有的:

 <style type="text/css">
.signupsubmit {
        line-height: 32px;
        position: absolute;
        left: 36px;
        color: white;
        top: 527px;
        font-family: arial;
        font-size: 17px;
        font-weight: 600;
        width: 137px;
        height: 30px;
        border-color: #00297A;
        border-radius: 4px;
        border: 1px solid black;
        border-style: solid;
        background-color: #FFB630;
        text-indent: 30px;
        }
<style>
<div class = "signupsubmit">Continue</div>

有人可以写一个例子来说明如何使“继续”按钮看起来是 3D 而不是 2D 的吗？

Answer 1

https://jsfiddle.net/zt2x0bct/

只需添加一个框阴影。可能是最简单的方法:

box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);

编辑:根据您的评论，听起来您正在寻找“渐变”。请参阅更新的 fiddle 。您还可以使用在线渐变生成器来帮助解决此问题。这是您可以修改“开始”和“结束”背景颜色的一个。或者您可以单击“展示”并找到与您要查找的内容接近的按钮:

http://css3button.net/