如何CSS样式半径边框

Question

我希望像附带的示例图片那样设置边框样式。

我希望它有一个黑色的框架和图片中的白色效果。

到目前为止，我有这个：

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

Answer 1

从我正在处理的项目中直接复制。只需改变你的颜色。只需要一点努力;）

＆＃13;

＆＃13;

    .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;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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应该有效。

这是一个例子。

＆＃13;

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;