Html 如何使 Div 框看起来 3D
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33203148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a Div box look 3D
提问by Leo L.
This is what I have so far:
这是我到目前为止：
<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>
Can someone write an example of how to make the Continue button look 3D instead of 2D?
有人可以写一个如何使继续按钮看起来是 3D 而不是 2D 的例子吗？
回答by prograhammer
https://jsfiddle.net/zt2x0bct/
https://jsfiddle.net/zt2x0bct/
Just add a box-shadow. Probably the simpliest way:
只需添加一个框阴影。可能是最简单的方法：
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
Edit:Based on your comment, sounds like you are looking for a "gradient". See updated fiddle. You can also use an online gradient generator to help with this. Here's one that you can modify the "start" and "end" background color. Or you can click on the "showcase" and find a button that is close to what you are looking for:
编辑：根据您的评论，听起来您正在寻找“渐变”。请参阅更新的小提琴。您还可以使用在线渐变生成器来帮助解决此问题。这是您可以修改“开始”和“结束”背景颜色的一种。或者，您可以单击“展示”并找到与您要查找的内容相近的按钮：
回答by Leo L.
Thanks guys for all your help. I finally got the answer and I will be writing it down. Thanks Niloct for you guide on using inspect element.
谢谢大家的帮助。我终于得到了答案，我会写下来。感谢 Niloct 为您提供使用检查元素的指南。
<div class = "signupsubmit">Continue<div>
<style type = "text/css">
.signupsubmit {
webkit-appearance: none;
align-items: flex-start;
background-attachment: scroll;
background-clip: border-box;
background-color: #FFA500;
background-origin: padding-box;
background-size: auto;
border-bottom-color: black;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: black;
border-left-style: solid;
border-left-width: 1px;
border-right-color: black;
border-right-style: solid;
border-right-width: 1px;
border-top-color: black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-style: solid;
border-top-width: 1px;
box-shadow: #80B2FF 0px 1px 1px 0px inset;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
direction: ltr;
display: inline-block;
font-family: 'Arial', 'Helvetica Neue', 'Segoe UI', 'Malgun Gothic', Meiryo, 'Microsoft JhengHei', helvetica, arial, sans-serif;
font-size: 12px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: bold;
height: 31px;
letter-spacing: 1px;
line-height: 15.12px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
min-width: 194px;
padding-bottom: 7px;
padding-left: 20px;
padding-right: 20px;
padding-top: 7px;
position: relative;
text-align: center;
text-indent: 0px;
text-rendering: optimizeLegibility;
text-shadow: rgba(0, 0, 0, 0.498039) 0px 1px 2px;
text-transform: none;
width: 194px;
word-spacing: 0px;
writing-mode: lr-tb;
-webkit-writing-mode: horizontal-tb;
zoom: 1;
left: 37px;
top: 515px;
position: absolute;
}
</style>
回答by Anthony
I'm not sure about 3D but you can make it as though it is in a 3D environment with 'rotate' command.
我不确定 3D，但您可以使用“旋转”命令将其设置为在 3D 环境中。
.signupsubmit {
transform: rotateY(70deg) rotateX(70deg);
-webkit-transform: rotateY(70deg) rotateX(70deg);
transition: 2s;
line-height: 32px;
left: 36px;
color: white;
text-align: center;
top: 527px;
border: none;
font-family: arial;
font-size: 17px;
font-weight: 500;
width: 137px;
height: 30px;
border-radius: 2px;
background-color: #FFB630;
text-indent: 30px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
}
.signupsubmit:hover {
-webkit-transform: rotateY(0deg) rotateX(0deg);
transform: rotateY(0deg) rotateX(0deg);
}<button class="signupsubmit">continue</button>
<p>You can also make a smooth transition with transition: (ex:2s);</p>