主页 / 问题 / 1152069
Accepted
Alex
Asked:2020-07-13 01:32:19 +0000 UTC2020-07-13 01:32:19 +0000 UTC

根据 CSS 布局的带有拉伸效果的样式输入

  • 772

在布局上，输入字段的样式如下：

图片1

第三天玩box-shadow inset，找不到合适的值来重复布局。请帮助我输入样式。

css

2 个回答

  1. Best Answer

    body {
  background: #1480a7;
}

input, textarea {
  display: inline-block;
  max-width: 100%;
  border-radius: 8px;
  border: 0;
  padding: 8px;
  background: #0f6586;
  color: #fff;
  font: inherit;
  box-sizing: border-box;
  box-shadow: 
    5px 5px 10px -3px rgba(0,0,0,.35) inset,
    3px  3px 1px -2px #005775 inset,
    -3px 3px 1px -2px #005775 inset,
    3px  -3px 1px -2px #6dc2e7 inset,
    -3px -3px 1px -2px #6dc2e7 inset;
}

input:not(:last-child), textarea:not(:last-child) {
  margin-bottom: 10px;
}
    <input type="text" placeholder="Name"><br>
<input type="email" placeholder="email address"><br>
<input type="tel" placeholder="phone"><br>
<textarea type="text" placeholder="Message"></textarea>

    • 4

  2. 据我了解，您想重现浮雕效果：

    input {
  display: block;
  border: none;
  border-radius: 20px;
  padding: 5px 8px;
  color: #333;
  box-shadow: 
    inset 0 2px 0 rgba(0, 0, 0, 0.2), 
    0 0 4px rgba(0, 0, 0, 0.1);
}

input:focus { 
  outline: none;
  box-shadow: 
    inset 0 2px 0 rgba(0, 0, 0, 0.2), 
    0 0 4px rgba(0, 0, 0, 0.1),
    0 0 5px 1px #51CBEE;
}
    <input placeholder="Введите текст">

    • 1

相关问题