Question

顺便说一下，我使用Angular和Bootstrap。

事情是，我被路由到我的模板＆＃34; main.html＆＃34;，它应该将这种风格应用于我的一个表单：

app2 = wx.App()
frame = graphs.BarsFrame()
frame.Show()
app2.MainLoop()

但形式永远不会得到边界规则。它适用于两个边距，但忽略了其余部分。

这是我的HTML模板（您可以看到这是出于测试目的）：

.main-form{
    margin-top: 15px;
    margin-left: 10px;
    border-radius: 13px 13px 13px 13px;
    -moz-border-radius: 13px 13px 13px 13px;
    -webkit-border-radius: 13px 13px 13px 13px;
    border: 0px solid #000000;
}

为什么它不应用CSS边界规则，即使它们出现在Firefox的开发者控制台上？它与Angular或Bootstrap有关吗？我想它不应该。

提前谢谢！

Answer 1

只需将您的课程添加到表单中即可。

＆＃13;

.main-form{
  margin-top:15px;
  margin-left:10px;
  border-radius:13px;
  border:none;
  background:#eee;
  padding:10px;
}

＆＃13;

<form class="main-form">
    <legend>Form title</legend>

    <div class="form-group ">
        <label for="">label</label>
        <input type="text" class="form-control" id="" placeholder="Input field">
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

＆＃13;

BORDER-RADIUS SUPPORT

此外，border-radius现在也得到了强有力的支持，所以由你来决定是否真的需要-webkit和-moz。

See browser support list

Answer 2

因为您提供了border: 0px

.main-form{
    margin-top: 15px;
    margin-left: 10px;
    border-radius: 13px 13px 13px 13px;
    -moz-border-radius: 13px 13px 13px 13px;
    -webkit-border-radius: 13px 13px 13px 13px;
    border: 10px solid #000000;
}

Answer 3

.main-form form {
    margin-top: 15px;
    margin-left: 10px;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: none;
}

这将适用于父div中的表单而不是父div本身。（无需更改任何HTML）
使用border: 0px solid #000000;无法执行任何操作，因为它设置为0.如果您不想要边框，只需使用border: none;，div的角将仍然是四舍五入的。< / p>
除非您希望在特定角落进行不同的舍入，否则您不需要对元素的所有4个角使用速记。如果你想要它们全部四舍五入，你只需要1个半径值。

CSS圆形边框不适用

3 个答案: