如何使用CSS样式绘制半径边框

Question

我想要像在示例图片中那样对边框进行样式设置。

我希望它具有黑框和白色效果，如图片所示。

到目前为止，我有这个：

div {
   border: 1px solid black;
   border-radius: 10px;
}

Answer 1

从我正在处理的项目中直接复制。 只需按照自己的方式更改颜色即可。 只需要一点努力;）

  .btn-primary { box-shadow: inset 0 1px 0 0 #54a3f7; background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%); border-radius: 3px; border: 1px solid #124d77; display: inline-block; cursor: pointer; color: #ffffff; padding: 6px 24px; text-decoration: none; text-shadow: 0 1px 0 #154682; } .btn-primary:hover { background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%); } .btn-primary:active { position: relative; top: 1px; } 

 <a class="btn-primary">Button galore</a> 

Answer 2

我认为可以使用以下CSS代码完成此操作：

div {
    -moz-box-shadow:    inset 0 0 2px #fff;
    -webkit-box-shadow: inset 0 0 2px #fff;
    box-shadow:         inset 0 0 2px #fff;
    border: 1px solid black;
    border-radius: 10px;
}

Answer 3

使用border-radius和box-shadow应该可以。

这是一个例子。

 body { background-color: #111; } div { border-top-left-radius: 6px; border-top-right-radius: 6px; box-shadow: 0 -2px 2px rgba(255, 255, 255, 0.6); background-color: #444; min-height: 50px; } 

 <div></div>