angular踩坑之input的圆角样式

基于Ant Design of Angular 实现的input框：

<nz-form-item>

<nz-form-label nzRequired="true" nzOffset="2">用户名</nz-form-label>

<nz-form-control nzSpan="10" [nzErrorTip]="userIdErrorTpl">

<nz-input-group><!-- 删掉 -->

<input nz-input formControlName="userIdFormControlName" [disabled]="true" [readonly]="true"

placeholder="请输入用户名" nzSize="default" [(ngModel)]="userId" maxlength="9"

value="{{ userId }}" />

</nz-input-group><!-- 删掉 -->

<ng-template #userIdErrorTpl let-control> </ng-template>

</nz-form-control>

</nz-form-item>

less(css)样式中：

input{

border-radius: 4px;

border: 1px solid #f12222;

}

奇怪的是border样式生效，border-radius不起作用。调查知道是用nz-input 这个属性就可以实现入力框圆角，但是发现自己也写了，后来才知道是和<nz-input-group>样式有冲突，删掉<nz-input-group>就好了。