el-input有弧度

el-input组件的弧度可以通过修改样式来实现。有几种方法可以实现弧度的调整。

第一种方法是通过自定义类样式来修改输入框的弧度。你可以创建一个自定义的类样式，比如`.input_border`，并在该类样式中添加`border-radius: 30px`的样式规则。然后将这个类样式应用到el-input组件上，例如`<el-input :class="input_border" />`。这样就可以使输入框的弧度变为30px。

第二种方法是通过样式穿透（`>>>`）来修改el-input组件内部的样式。你可以使用`:deep()`伪类来选择el-input组件内部的元素，并在其中添加`border-radius: 30px`的样式规则。例如，通过`:deep(.el-input__inner)`来选择el-input组件内部的输入框元素，并添加`border-radius: 30px`的样式规则。

第三种方法是直接修改el-input组件的样式。你可以在全局的样式文件中添加以下样式规则来修改el-input组件的样式：

.el-input__wrapper {
  border-radius: 30px;
}

这样可以直接改变el-input组件的输入框的弧度。

根据你提供的代码，可以看出你使用了第一种方法，即通过自定义类样式来修改输入框的弧度。在你的代码中，你创建了一个名为`input_border`的类样式，并将其应用到el-input组件上。然后在样式中使用样式穿透（`>>>`）来选择el-input组件内部的输入框元素，并添加了`border-radius: 30px`的样式规则。这样就实现了el-input组件的弧度调整。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *3* [ElementUI组件的＜el-input＞组件通过样式穿透设置圆角。](https://blog.csdn.net/Dai_Aixy/article/details/126752142)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
- *2* [Vue修改element-ui库的输入框样式--样式穿透](https://blog.csdn.net/qwqc262/article/details/119806712)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]