ArkTs内外边距，边框，背景图，横纵布局模式

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column({
      space: 10
    }) {
      Column() {
        Image($r('app.media.bz'))
          .width(150)
          .height(150)//圆角
          .borderRadius(100)
        Text('XX用户')
          .fontSize(20)
          .textAlign(TextAlign.Center)
          .fontFamily('微软雅黑')
      }
      .padding(20)
      .border({
        width: {
          left:1,
          right:2,
          top:3,
          bottom:4
        },
        color: Color.Red,
        style:{
          left: BorderStyle.Solid,
          right: BorderStyle.Dotted,
          top: BorderStyle.Dashed,
          bottom: BorderStyle.Solid
        }
      })
      Column() {
        Button('QQ登录')
          .width(300)
          .fontSize(20)
          .fontColor(Color.Yellow)
          .onClick(() => {
            //弹窗显示你好世界
            console.log('你好世界');
          });
        Text('圆角')
          .width(100)
          .height(20)
          .backgroundColor('#ff7698f1')
          .borderRadius(10)
      }
    }.width('100%')
  }
}

和前端css差距不大，挨个挨个.属性名就行。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column({
      space: 10
    }) {

    }
    .width('100vp')
    .height('100vp')
    .backgroundImage($r('app.media.bz'))
    .backgroundImageSize({
      width: '100%'
    })
    .backgroundImagePosition({
      x: 10,
      y: 20

    })
  }
}

 背景图片也和css中的一样，可以设置大小，位置 

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column({
      space: 10
    }) {
     Row(){
       Text()
         .width(50)
         .height(50)
         .backgroundColor(Color.Red)
       Text()
         .width(50)
         .height(50)
         .backgroundColor(Color.Red)
       Text()
         .width(50)
         .height(50)
         .backgroundColor(Color.Red)
       Text()
         .width(50)
         .height(50)
         .backgroundColor(Color.Red)
     }
     .width(`100%`)
     //Start          顶部对齐
     //Center         居中对齐
     //End            底部对齐
     //SpaceBetween   两端对齐,两端无空位
     //SpaceAround    两端对齐,两端有空位，空位高度为中部空位50%
     //SpaceEvenly     两端对齐,两端有空位，空位高度与中部空位相同
     .justifyContent(FlexAlign.SpaceEvenly)

      Text()
        .width(50)
        .height(50)
        .backgroundColor(Color.Yellow)
      Text()
        .width(50)
        .height(50)
        .backgroundColor(Color.Yellow)
      Text()
        .width(50)
        .height(50)
        .backgroundColor(Color.Yellow)
      Text()
        .width(50)
        .height(50)
        .backgroundColor(Color.Yellow)
    }
    .width(`100%`)
    .height(`100%`)
    .border({
      width:1
    })
    //Start          顶部对齐
    //Center         居中对齐
    //End            底部对齐
    //SpaceBetween   两端对齐,两端无空位
    //SpaceAround    两端对齐,两端有空位，空位高度为中部空位50%
    //SpaceEvenly     两端对齐,两端有空位，空位高度与中部空位相同
    // .justifyContent(FlexAlign.SpaceAround)
  }
}

 就是css的弹性布局