定义一个文本框input样式-CSDN博客

本文详细解析了一个CSS文本框样式的实现，包括高度、行高、内边距、字体、背景色、边框、圆角、阴影及过渡效果。通过深入探讨transition属性的作用，解释了如何平滑地改变CSS属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input.timeInput{
height: 18px;
line-height: 18px;
text-indent:20px;
width:110px;
font-family:Arial;
vertical-align: middle;
background-color: white;
border: 1px solid #999;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s; 
}

上面定义的是一个文本框的样式，是圆角的哦！

transition属性主要是用来对某个css属性的变化过程进行控制，官方的介绍是”CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.“。而我个人则简单地理解为”在某个时间段内，平滑地改变某个CSS属性。“。Transition又包含了四个子属性，分别为property、duration、timing-function、delay。（transition这个真没搞懂）

转载于:https://www.cnblogs.com/berylWang/archive/2012/07/31/2616944.html