极客观点
研发管理
HarmonyOS
我编写了以下代码来创建表单，我已经为我的表单添加了一些样式。现在我想在我的表单中添加这样的边框。我很努力，但无法添加它。
谁能帮我做到这一点？
.details {
background-color: #eb4e24;
height: 800px;
}
input[type=text],
#uexperience,
#equalification,
#roles {
width: 86%;
padding: 7px 7px;
border: #c1c1c1 solid 1px;
height: 40px;
background: none;
/*border-radius: 5px;*/
}
select {
width: 28%;
height: 37px;
padding: 0 1em;
background: none;
border: #c1c1c1 solid 1px;
}
.border {
border: #dbdbdb solid 1px;
}
table td {
padding: 10px;
}
input[type=file] {
border: #c1c1c1 solid 1px;
height: 40px;
padding: 8px 7px;
width: 86%;
}
label {
color: red;
}
#captcha {
width: 77%;
}
.fa {
font-size: 2em !important;
color: #fff;
padding-left: 15px;
}
form {
margin-top: 15%;
/*border: 1px solid;*/
}
<body>
<div class="container">
<div class="col-lg-12">
<div class="col-lg-6">
<form>
<table width="100%">
<tbody>
<tr>
<td>
First Name
<label>*</label>
<br>
<input type="text" name="fname" id="fname" class="">
</td>
</tr>
<tr>
<td>
Email Address
<label>*</label>
<br>
<input type="text" name="email" id="email" class="">
</td>
</tr>
<tr>
<td>
Job position
<label>*</label>
<br>
<input type="text" name="position" id="position" class="">
</td>
</tr>
<tr>
<td>
Current Employer
<label>*</label>
<br>
<input type="text" name="currentemp" id="currentemp" class="">
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="col-lg-6 details">
<form>
<table width="100%">
<tbody>
<tr>
<td>
Last Name
<label>*</label>
<br>
<input type="text" name="lname" id="lname" class="">
</td>
</tr>
<tr>
<td>
Mobile No.
<label>*</label>
<br>
<input type="text" name="phone" id="phone">
</td>
</tr>
<tr>
<td>
Experience
<label>*</label>
<br>
<select id="uexperience" class="decorated">
<option id="selectHeader">--------- Select Experience --------------</option>
<option value="1-2 YEAR">1-2 Years</option>
<option value="1-3 YEAR">1-3 Years</option>
<option value="2-4 YEAR">2-4 Years</option>
<option value="4-6 YEAR">4-6 Years</option>
<option value="6-10 YEAR">6-10 Years</option>
<option value=">10 YEAR">> 10 Years</option>
</select>
</td>
</tr>
<tr>
<td>
Enter code Here
<label>*</label>
<br>
<input type="text" name="captcha" id="captcha"><i class="fa fa-refresh" aria-hidden="true"></i>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</body>
完整代码在这里 https://jsfiddle.net/qxoos44h/
原文由 krish 发布，翻译遵循 CC BY-SA 4.0 许可协议
如果你想有两种颜色的边框，你可以使用这个小技巧：
这是如何运作的？
左右边框是真正的边框，而顶部和底部的边框实际上只是一个背景图像。
为了制作“颜色分割”效果，我们将使用背景图像作为顶部和底部边框。我们通过制作两个相同的渐变来做到这一点。
第一种颜色 从
0%开始，到50%结束。第二种颜色 从
50%开始到100%结束然后我们使用
background-position将第一个渐变放在顶部，第二个放在form的底部。为了使我们的“假边框”与我们的“真实边框”具有相同的厚度，我们使用
background-size来更改图像的宽度和高度。最后，我们还将背景设置为
no-repeat。否则渐变会填满整个表格，从而破坏边界错觉。但在你的情况下，还有另一种简单的方法。
由于您使用彼此相邻的列，因此您可以将边框应用于这些边框，并将它们设置为不同的颜色，并隐藏右侧列上的
left-border和right-border在左栏。像这样：为了获得最佳效果，您应该为两列设置相同的高度，并将“分色”背景应用于列的容器，并带有填充。否则右栏的白色边框会与背景融为一体。
更新 - 居中的标题
如果你想在顶部边框上添加一个标题，这样看起来文本是重叠的，你可以这样做：
h1使标题居中并具有背景渐变，与.container处的匹配，因此看起来一部分已被剪掉。span也使用渐变作为背景，但反转为其父级。然后使用background-clip: text和color: transparent将渐变放在文本上。请参阅下面的 Fiddle 中的完整代码：
工作小提琴
希望这可以帮助你。