ArkUI 边框border , 组件圆角borderRadius 特殊圆角

组件边框 border

作用：给组件添加边框

四个方向都一样
  .border({ 
    width:xx, //边框宽度 必须设置
    color: xx,  //颜色
    style:BorderStyle.xx//样式
  })  

四个方向不一致 通过top 、bottom 、left、right ,分别设置上下左右方向属性
  .border({    
    width:{top:xx, left:xx }, //分别边框宽度 必须设置
    color: {left:xx,top :xx},  //分别颜色
    style:{left:BorderStyle.xx ,top :BorderStyle.xx}//分别样式
  })
  

import { Size } from '@ohos/hypium';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Column({space:20}){
      Text("边框组件1")
        .border({
          width:1, //边框宽度 必须设置
          color: Color.Blue,  //颜色
          style:BorderStyle.Dashed //样式
        })
        .fontSize(70)

      Text("边框组件2")
        .border({
          width:{top:4, left:5 }, //分别边框宽度 必须设置
          color: {left:Color.Blue,top :Color.Red},  //分别颜色
          style:{left:BorderStyle.Solid ,top :BorderStyle.Dashed}//分别样式
        })
        .fontSize(70)
    }
    .width("100%")


  }
}

组件圆角borderRadius

四个方向都一样
.borderRadius(xx)  //四个圆角都为xx

四个方向不一样通过topLeft，topRight，bottomLeft，bottomRight分别设置上左，上右，下左，下右四个方向的圆角

.borderRadius({
topLeft:xx,
topRight:xx,
bottomLeft:xx,
bottomRight:xx
}）

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Column({space:20}){
      Text("组件圆角1")
        .fontSize(70)
        .backgroundColor(Color.Blue)
        .borderRadius(15)

      Text("组件圆角2")
        .fontSize(70)
        .backgroundColor(Color.Red)
        .borderRadius({
          topLeft:10,
          topRight:20,
          bottomLeft:20,
          bottomRight:10
        })
    }
    .width("100%")



  }
}

特殊圆角

圆形

组件宽和高设置为一致，圆角设置为宽高的一半

椭圆形（胶囊形状）

设置圆角为高的一半

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Column({space:20}){

      Image($r("app.media.xishen"))  //圆形组件，设置宽高相等，圆角为宽高一半
        .width(200)
        .height(200)
        .borderRadius(100)

      Text("修改头像")    //椭圆形组件，设置圆角为高的一半
        .fontSize(70)
        .height(100)
        .borderRadius(50)
        .backgroundColor(Color.Pink)

    }
    .width("100%")

}
}