最基本的方法是使用 CSS 的 border 属性。下面这个例子可以给表单的每个表单项添加 1 像素的黑色边框,如果你想要更宽的边框,可以增加 border-width 的值:
form input {
border: 1px solid black;
}
但是这种方法只是给每个表单项都添加上了边框,如果你只想给整个表单添加一个边框,那么可以在表单的外面再套一个 div,并将它添加边框:
<div class="border">
<form>
<!-- 表单项 -->
</form>
</div>
.border {
border: 1px solid black;
padding: 10px;
}
这样设置之后,整个表单就被包裹在一个带有边框的 div 中了,这个 div 的 padding 可以控制表单和边框之间的距离。如果你不想让 div 的背景色和表单背景色有区别,可以将它们的背景色设置为一致。
注意,如果你的表单项宽度加上 border 和 padding 的宽度超过了 div 的宽度,会导致表单的布局不正确。因此,在设置表单边框时,要留意表单项内部元素的宽度和边距设置。
文章说明:
本文原创发布于探乎站长论坛,未经许可,禁止转载。
题图来自Unsplash,基于CC0协议。
该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。