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);

修改：根据您的评论，听起来就像是在寻找“渐变”。看到更新的小提琴。您还可以使用在线渐变生成器来帮助解决此问题。这是您可以修改“开始”和“结束”背景颜色的一个。或者您可以单击“展示”并找到一个接近您要查找的按钮：

http://css3button.net/

Answer 2

谢谢大家的帮助。我终于得到了答案，我将把它写下来。感谢Niloct为您提供有关使用检查元素的指导。

// definition (defined with let)
let complete = RealmOptional<Bool>()  // defaults to nil
// usage
complete.value = false  // set non-nil value
...
complete.value = nil    // set to nil again

Answer 3

我不确定3D，但你可以把它变成3D环境中的旋转＆＃39;命令。

＆＃13;

.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);
}

＆＃13;

<button class="signupsubmit">continue</button>
<p>You can also make a smooth transition with transition: (ex:2s);</p>

＆＃13;

Answer 4

复制自this

div {
  transform:
    perspective(75em)
    rotateX(18deg);
  box-shadow:
    rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
    rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
  border-radius: 10px;
  border: 1px solid;
  border-color:
    rgb(213, 220, 226)
    rgb(213, 220, 226)
    rgb(184, 194, 204);
}

如何使Div盒子看起来像3D

4 个答案: