HarmonyOS鸿蒙Next中borderRadius属性设置百分比并且生效

HarmonyOS鸿蒙Next中borderRadius属性设置百分比并且生效

在Api12中borderRadius是支持元素的边框圆角半径，支持百分比的，但是必须要搭配clip属性使用才能生效。

原因：当使用百分比后需要把多余的部分裁剪掉才能看到圆角，不然看到的还是图片本身。可以理解为内容溢出，溢出的部分需要裁剪掉。

Image('https://tse3-mm.cn.bing.net/th/id/OIP-C.7x5IsCmFDdUUhFwrGw0iWgHaHa?w=217&h=217&c=7&r=0&o=5&dpr=1.5&pid=1.7')
      .width(28)
      .aspectRatio(1)
      .borderRadius('50%')
      .clip(true)

更多关于HarmonyOS鸿蒙Next中borderRadius属性设置百分比并且生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，borderRadius属性支持使用百分比来设置圆角半径。百分比是相对于元素的宽度或高度来计算的。具体来说，borderRadius可以设置为一个百分比值，例如50%，这将使元素的四个角都变成圆形。

例如，如果你有一个宽高均为100px的元素，设置borderRadius为50%，那么每个角的圆角半径将是50px，最终元素将呈现为一个圆形。

在鸿蒙Next中，borderRadius属性可以直接在样式表中使用，例如：

.element {
    width: 100px;
    height: 100px;
    borderRadius: 50%;
}

这样设置后，borderRadius属性会生效，并且元素的四个角都会根据百分比值进行圆角处理。

需要注意的是，borderRadius属性也可以分别设置四个角的圆角半径，例如：

.element {
    width: 100px;
    height: 100px;
    borderRadius: 10% 20% 30% 40%;
}

这种情况下，元素的四个角将分别按照10%、20%、30%、40%的百分比值进行圆角处理。

总之，在鸿蒙Next中，borderRadius属性可以通过百分比值来设置圆角半径，并且会根据元素的宽高自动计算实际的圆角大小。

更多关于HarmonyOS鸿蒙Next中borderRadius属性设置百分比并且生效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，borderRadius属性支持通过百分比设置圆角。百分比是相对于元素自身的宽度或高度计算的，确保在不同尺寸下圆角比例一致。例如，borderRadius: 50%会将元素变为圆形。确保在样式中正确应用该属性，如：borderRadius: '50%'，并在布局中生效。

回到顶部