如何使用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>