Question

我想知道这种形式的样式是否有正式名称：https://www.tumblr.com/login或https://www.tumblr.com/register 输入框打包在一起，两行之间有一条线，如果有，我可以使用现有的库来制作这些表格吗？

Answer 1

它只是一个css代码！您应该使用以下代码：

.class {
    border-bottom: 1px solid gray;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    ...
}

您可以将“top”更改为“bottom”，将“right”更改为“left”。

Answer 2

此类型没有特定名称，至少我不知道。它刚刚使用CSS样式制作。

这些方面的东西是tumblr使用的：

这个CSS

.signup_form {
background: -moz-linear-gradient(center top , #DDE5ED 0px, #F2F3F4 100%) repeat scroll 0 0 transparent;
border: 1px solid rgba(0, 0, 0, 0.8);
border-radius: 8px 8px 8px 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.36) inset, 0 1px 0 rgba(255, 255, 255, 0.15);
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 245px;
}

.signup_form .row {
border-top: 1px solid rgba(0, 0, 0, 0.12);
position: relative;
}

这个HTML

<div id="signup_form" class="signup_form">
    <div class="row">
        <label>Email</label>
    </div>
    <div class="row">
        <label>Password</label>
    </div>
</div>

包装在一起的输入框形成风格

2 个答案: