border-radius

# border-radius

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。

# uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 语法

border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?;

# 示例

hello uni-app x

Template

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view style="flex-grow: 1">
      <view>
        <text>border-radius: 10px</text>
        <view class="common" style="border-radius: 10px"></view>
      </view>

      <view>
        <text>border-top-left-radius: 10px</text>
        <view class="common" style="border-top-left-radius: 10px"></view>
      </view>

      <view>
        <text>border-top-right-radius: 10px</text>
        <view class="common" style="border-top-right-radius: 10px"></view>
      </view>

      <view>
        <text>border-bottom-left-radius: 10px</text>
        <view class="common" style="border-bottom-left-radius: 10px"></view>
      </view>

      <view>
        <text>border-bottom-right-radius: 10px</text>
        <view class="common" style="border-bottom-right-radius: 10px"></view>
      </view>

      <view>
        <text>border-radius: 250px（与长宽相同形成正圆）</text>
        <view class="common" style="border-radius: 250px"></view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<style>
  .common {
    width: 250px;
    height: 250px;
    background-color: gray;
  }
</style>