元素外边框效果

Question

您好，我想在灰色边框线外设置浅灰色轮廓，如下图所示。要么设置边框位置，要么模糊输入文本。 请告诉我如何解决这个问题？我在 css 中完成所有这些。

.container {
  background-color: aquamarine;
  width: 100%;
  height: auto;
}

input[type="text"],
textarea,
textarea.form-control {
  background-color: #efeeef;
  width: 396px;
  height: 48px;
  border-radius: 4px;
  border: 3px solid #cecece;
}

textarea.form-control {
  line-height: 50%;
  font-size: 16px;
  color: red;
  font-weight: 500;
}

<div class="container">
  <!--Form element-->
  <form>
    <fieldset>
      <input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control textarea border-color outline" id="form-email">
    </fieldset>
  </form>

</div>

我在使用阴影效果的时候也是没用的，有什么办法可以设置这个输入区域的边框位置。

Answer 1

我不是专家，但试试

form{
         border: 1px(thickness) outset(type of border) grey(color)

     }

有关更多信息，请访问此链接： https://www.w3schools.com/css/css_border.asp

Answer 2

边界不能设置为模糊（至少直接）。如果您正在使用某种 CSS 库，比如 Bootstrap，那么它可能会向输入元素添加 box-shadow。

在所需输入上设置 box-shadow: none; 应该可以解决问题。