搜索栏忽略来自 css 的半径并保留尖角

如何解决搜索栏忽略来自 css 的半径并保留尖角

我正在使用 angular nativescript 构建一个 android 应用程序，我希望我的应用程序有一个带圆角的搜索栏。我在我的 html 中写了这段代码：

<SearchBar class="search"></SearchBar>

并添加到css中：

.search{
    border-radius: 30;
}

但是搜索栏保持其角落没有半径，如图所示。我该怎么办？

解决方法

分配属性值的单位：

.search{
    border-radius: 30px;
}

,

正确添加单元。 您可以使用任何您喜欢的单位，但我更希望您使用 px 或 %。

 .search{
    border-radius: 50px;
}

或

 .search{
    border-radius: 50%;
}

这可能会解决您的问题。

,

我建议您创建一个自定义 SearchBar 组件。

根据我从 SearchBar 文档中读到的内容，我认为不支持 border-radius。主要是因为它依赖于Native Component，我认为它没有那么可定制。

对于那些说要添加 px 或 !important 的人，我不会使用 NS。