改变el-input框的样式（去掉边框），及scoped实现原理

改变el-input框的样式（去掉边框）

<el-input v-model="username" placeholder="请输入用户名" class="pass_input" ></el-input>

css样式（这里用到的方法叫做：样式穿透 /deep/）：

<style lang='less' scoped>
    .pass_input {
            float: left;
            width: 215px;
            margin-left: 10px;
            // el-input__inner是el-input的input类名
            & /deep/ .el-input__inner {
                    border: none;
            }
    }
<style>

1.什么是scoped

当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。

2.scoped实现原理

Vue中的scoped属性的效果主要是通过PostCss实现的。PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，给css选择器额外添加一个对应的属性选择器，来选择组件中的dom,这种做法使得样式只作用于含有该属性的dom元素(组件内部的dom)。

3.scoped穿透

scoped看起来很美，但是，在很多项目中，会出现这么一种情况，即：引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透scoped。

sass 和 less的样式穿透 使用 /deep/

stylus的样式穿透 使用 >>>

如果没有写scoped属性，那么改变第三方组件样式的时候就不用考虑样式穿透了。