输入文本字段的CSS代码

Question

是否可以使用纯CSS创建这样的文本字段？

我就在这时（SASS代码）：

input[type="text"]  
  :background  url(../../img/input_text_bg.png) repeat-x
  :border-color light-grey
  :width 210px
  :height 30px
  :-moz-border-radius 4px
  :-webkit-border-radius 4px
  :margin-top 20px
  :margin-left 40px
  :color $dark-grey

你可以看到我仍然使用背景图像，是用一些渐变替换它吗？

Answer 1

您应该尝试使用Webkits，它允许您使用基本CSS / CSS3来舍入边框半径并使用一系列颜色创建渐变。

Answer 2

尝试使用此CSS作为渐变背景。

background-image: linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%);
background-image: -o-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%);
background-image: -moz-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%);
background-image: -webkit-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%);
background-image: -ms-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%);

background-image: -webkit-gradient(
    linear,
    right top,
    right bottom,
    color-stop(0.1, rgb(240,240,240)),
    color-stop(0.58, rgb(255,255,255))
);

Answer 3

你可以使用CSS3的box-shadow和inset。 e.g

input[type=text] {
    box-shadow: inset 2px 2px 2px 2px black;
}