如何在nativescript中为stacklayout提供border和border-radius

Question

我是nativescript的新手。我不知道如何给stacklayout提供border和border-radius。

下面我发布了我到目前为止所尝试的内容：

component.html：

 <StackLayout class ="stackBorder" orientation="horizontal">
    <Label text="Label 1" width="50" height="50" > </Label>
    <Label text="Label 2" width="50" height="50" > </Label>
    <Label text="Label 3" width="50" height="50" backgroundColor="white"> </Label>
    <Label text="Label 4" width="50" height="50" backgroundColor="white"> </Label>
  </StackLayout>

component.css：

StackLayout {
  margin: 10;
  background-color: green;

}

.stackBorder {
 border: 2px solid red;
   border-radius: 8px;
}

component.ts：

@Component({
    selector: "sdk-child-component",
    moduleId: module.id,
    templateUrl: "./component.html",
    styleUrls: ["./component.css"]
})

最后我无法在stacklayout中看到边框。

Answer 1

在nativescript支持的css属性中是border-width，border-color和border-radius。单独使用标记边框也不可能进行任何实体选择。

更多信息：

https://docs.nativescript.org/ui/styling

Answer 2

Zia html：

<StackLayout borderRadius="30" borderColor="red" borderWidth="3"></StackLayout>

通过css：

StackLayout {
  border-color: red;
  border-width: 3;
  border-radius: 30;
}

Answer 3

我想你可以使用每边边框。检查这个https://www.nativescript.org/blog/per-side-borders-in-nativescript-css