html – 如何使用bootstrap在div周围创建圆形边框？

发布时间：2020-12-14 18:47:16 所属栏目：资源来源：网络整理

导读：我正在使用bootstrap 3.输入类型=文本元素很酷.现在我想在div元素周围创建一个类似的圆形边框.我尝试过的任何东西看起来都很难看,是否可以使用bootstrap 3？提前致谢解决方法由于您试图模拟引导输入,@ James Lawruk建议使用.form-control是最快捷的方法.

我正在使用bootstrap 3.输入类型=文本元素很酷.现在我想在div元素周围创建一个类似的圆形边框.我尝试过的任何东西看起来都很难看,是否可以使用bootstrap 3？

提前致谢

解决方法

由于您试图模拟引导输入,@ James Lawruk建议使用.form-control是最快捷的方法.

但是如果你想学习如何模仿你在其他地方看到的样式(你应该),你需要检查.form-control中使用的css(如果在Chrome上,右键单击并“检查元素”),复制相关的样式,并创建自己的类来应用.

在这种情况下：

.form-control{
  display: block;
  width: 100%; /* THIS */
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555; /* THIS */
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc; /* THIS */
  border-radius: 4px; /* THIS */
}

变

.custom{
  width: 100%;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 4px;
}

注意：我忽略了一些也附加到.form-control的伪类,例如：focus,但伪元素是你可能不想应用为另一个目的而设计的类的另一个原因.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!