element el-input 去掉边框

element样式还是蛮好的，只是有时候我们需要做一些调整，比如，el-input 的边框，官网是这样子的

我们需要这样子的

然后我们常规操作，**border: none;**或者 border: 0; 发现行不通，哈哈哈哈哈

tip：将border属性设成0，虽然边框不见了，但是浏览器依然会对border-width和border-color进行渲染，会占用浏览器的资源。将border设置成none，浏览器就不会做出渲染动作。

然后就就，就发现个好东西，>>>， >>> 是vue的深度选择器，vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过**>>>**，穿透scoped。

tip:无任何依赖时,纯css写**>>>**是无效果哒

那我们来看一下怎么操作这个 >>> ，要注意这里是 父级>>>el-input ，必须是这样，否则没有效果

<div class="inputDeep">
    <el-input></el-input>
</div>

  /* 利用穿透，设置input边框隐藏 */
  .inputDeep>>>.el-input__inner {
    border: 0;
  }
  /* 如果你的 el-input type 设置成textarea ，就要用这个了 */
  .inputDeep>>>.el-textarea__inner {
    border: 0;
    resize: none;/* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
  }

才疏学浅，如有不足，欢迎指出 ，不胜感激()

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 前端开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的 点击我的GitHub免费获取。
还有免费的 高级web全套视频教程 前端架构 H5 vue node 小程序 视频+资料+代码+面试题！

全方面的web前端进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。