H5 + C3基础（三）C3 过渡 & 文本框

C3 过渡

在默认情况下，HTML 对 CSS 的应用都是即时的，在不同的样式之间切换会显得较为生硬。
C3提供的过渡效果，会让这个过程更加圆滑，呈现出逐渐变化的效果。
此场景经常与 :hover 一起使用
transition只是定义指定属性的变化行为并不会触发变化。触发过渡是其他因素引起的该属性样式变化 按照 transition 定义的过渡体现出来

语法：transition: 需要过渡的CSS属性 过渡时间 速率 开始时间
CSS属性：指定一个或多个所有属性都要过渡时，写all需要过渡的属性，逗号隔开
过渡时间：完成整个过程的时间（带单位 s/ms）
速率：过渡速率变化（默认 ease）

- ease：速度变慢
- linear：匀速
- ease-in：加速
- ease-out：减速
- ease-in-out：先加速后减速

开始时间：延迟过渡时间（带单位 s/ms），默认 0：无延迟

例子：设置div的宽和 背景颜色过渡效果（一般情况，只设置 属性和时间即可）

div{
    width: 100px;
    height: 100px;
    background-color: #449fdb;
    /*定义这两个属性的过渡行为，多个属性过渡用 逗号 隔开*/
    transition: background-color 10s ease-in, width 10s linear;
}

div:hover{
	/*触发上面的属性过渡*/
   background-color: #990055;
   width: 500px;
}

文本框

基础样式初始化

input 及 botton 有默认的边框，可以在基础样式表里面去除
input输入框获得焦点时，默认有蓝色的边框，一般也需要去掉

button, input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    border: 0;
    outline: none;
}

默认值 placeholder

input 输入框默认值，使用C3属性 placeholder
一般提示文字不是紧贴左边的，此时有几种方式处理

• 给输入框添加 padding-left
• 给placeholder添加 text-indent: 2em…;

placeholder文字选择器

input::placeholder{
    color: blue;
    font-size: 16px;
}

输入框后面的按钮

由于input和button是行内块，默认中间会有一个缝隙，这个缝隙和字体大小有关
可以通过 font-size:0；或者 二者浮动解决

<div class="search">
    <input type="search" name="kw" id="kw" placeholder="请输入">
    <button>搜索</button>
</div>

这里按钮和父盒子在不同比例时，可能有缝隙

在对窗口进行缩放时，有的比例可能会有缝隙。
可以给按钮设置一个outline属性，不占据位置，但是不能控制哪一边，因此会影响按钮视觉上的大小

border{
	outline: 1px solid 边框实际颜色;
}