前端学习笔记

实现正常状态和focus状态宽度不一致的input文本输入框，且鼠标焦点进入输入框时，宽度的变化以动画呈现

HTML

	<input tyle="text">

CSS

    input {
        width: 200px;
        height: 30px;
        transition:width 2s;
    }
    input:focus /* 选择获得焦点的输入字段 */{
        width: 400px;
        /* input输入框 去掉外边框 */
        border:none; 
        outline:medium;
         /* inser边框内添加阴影 */
        box-shadow: inset 0px 0px 8px rgba(102,175,233,0.6), 
        			0px 0px 8px rgba(102,175,233,0.6);
    }

最终成果