LwuCSS

Appearance

On this page

边框 ​

边框圆角 ​

用于控制元素边框半径的功能类。

使用前缀 ​

为了防止和开发者项目中的其他原子化样式语法冲突，样式库默认添加了前缀 lwu，使用示例如下：

vue
<view class="lwu-flex"></view>

语法 ​

rounded ​

ClassProperties平台兼容性说明
rounded-noneborder-radius: 0pxH5、小程序、app-vue、app-nvue
rounded-xsborder-radius: 0.3125remH5、小程序、app-vue、app-nvue
rounded-smborder-radius: 0.625remH5、小程序、app-vue、app-nvue
rounded-baseborder-radius: 0.9375remH5、小程序、app-vue、app-nvue
rounded-lgborder-radius: 1.25remH5、小程序、app-vue、app-nvue
rounded-xlborder-radius: 1.5625remH5、小程序、app-vue、app-nvue
rounded-2xlborder-radius: 2.5remH5、小程序、app-vue、app-nvue
rounded-3xlborder-radius: 3.75remH5、小程序、app-vue、app-nvue
rounded-4xlborder-radius: 5remH5、小程序、app-vue、app-nvue
rounded-fullborder-radius: 312.4375remH5、小程序、app-vue、app-nvue

rounded-t ​

ClassProperties平台兼容性说明
rounded-t-noneborder-top-left-radius: 0px
border-top-right-radius: 0px		H5、小程序、app-vue
rounded-t-xsborder-top-left-radius: 0.3125rem
border-top-right-radius: 0.3125rem		H5、小程序、app-vue
rounded-t-smborder-top-left-radius: 0.625rem
border-top-right-radius: 0.625rem		H5、小程序、app-vue
rounded-t-baseborder-top-left-radius: 0.9375rem
border-top-right-radius: 0.9375rem		H5、小程序、app-vue
rounded-t-lgborder-top-left-radius: 1.25rem
border-top-right-radius: 1.25rem		H5、小程序、app-vue
rounded-t-xlborder-top-left-radius: 1.5625rem
border-top-right-radius: 1.5625rem		H5、小程序、app-vue
rounded-t-2xlborder-top-left-radius: 2.5rem
border-top-right-radius: 2.5rem		H5、小程序、app-vue
rounded-t-3xlborder-top-left-radius: 3.75rem
border-top-right-radius: 3.75rem		H5、小程序、app-vue
rounded-t-4xlborder-top-left-radius: 5rem
border-top-right-radius: 5rem		H5、小程序、app-vue
rounded-t-fullborder-top-left-radius: 312.4375rem
border-top-right-radius: 312.4375rem		H5、小程序、app-vue

rounded-r ​

ClassProperties平台兼容性说明
rounded-r-noneborder-top-right-radius: 0px
border-bottom-right-radius: 0px		H5、小程序、app-vue
rounded-r-xsborder-top-right-radius: 0.3125rem
border-bottom-right-radius: 0.3125rem		H5、小程序、app-vue
rounded-r-smborder-top-right-radius: 0.625rem
border-bottom-right-radius: 0.625rem		H5、小程序、app-vue
rounded-r-baseborder-top-right-radius: 0.9375rem
border-bottom-right-radius: 0.9375rem		H5、小程序、app-vue
rounded-r-lgborder-top-right-radius: 1.25rem
border-bottom-right-radius: 1.25rem		H5、小程序、app-vue
rounded-r-xlborder-top-right-radius: 1.5625rem
border-bottom-right-radius: 1.5625rem		H5、小程序、app-vue
rounded-r-2xlborder-top-right-radius: 2.5rem
border-bottom-right-radius: 2.5rem		H5、小程序、app-vue
rounded-r-3xlborder-top-right-radius: 3.75rem
border-bottom-right-radius: 3.75rem		H5、小程序、app-vue
rounded-r-4xlborder-top-right-radius: 5rem
border-bottom-right-radius: 5rem		H5、小程序、app-vue
rounded-r-fullborder-top-right-radius: 312.4375rem
border-bottom-right-radius: 312.4375rem		H5、小程序、app-vue

rounded-b ​

ClassProperties平台兼容性说明
rounded-b-noneborder-bottom-left-radius: 0px
border-bottom-right-radius: 0px		H5、小程序、app-vue
rounded-b-xsborder-bottom-left-radius: 0.3125rem
border-bottom-right-radius: 0.3125rem		H5、小程序、app-vue
rounded-b-smborder-bottom-left-radius: 0.625rem
border-bottom-right-radius: 0.625rem		H5、小程序、app-vue
rounded-b-baseborder-bottom-left-radius: 0.9375rem
border-bottom-right-radius: 0.9375rem		H5、小程序、app-vue
rounded-b-lgborder-bottom-left-radius: 1.25rem
border-bottom-right-radius: 1.25rem		H5、小程序、app-vue
rounded-b-xlborder-bottom-left-radius: 1.5625rem
border-bottom-right-radius: 1.5625rem		H5、小程序、app-vue
rounded-b-2xlborder-bottom-left-radius: 2.5rem
border-bottom-right-radius: 2.5rem		H5、小程序、app-vue
rounded-b-3xlborder-bottom-left-radius: 3.75rem
border-bottom-right-radius: 3.75rem		H5、小程序、app-vue
rounded-b-4xlborder-bottom-left-radius: 5rem
border-bottom-right-radius: 5rem		H5、小程序、app-vue
rounded-b-fullborder-bottom-left-radius: 312.4375rem
border-bottom-right-radius: 312.4375rem		H5、小程序、app-vue

rounded-l ​

ClassProperties平台兼容性说明
rounded-l-noneborder-top-left-radius: 0px
border-bottom-left-radius: 0px		H5、小程序、app-vue
rounded-l-xsborder-top-left-radius: 0.3125rem
border-bottom-left-radius: 0.3125rem		H5、小程序、app-vue
rounded-l-smborder-top-left-radius: 0.625rem
border-bottom-left-radius: 0.625rem		H5、小程序、app-vue
rounded-l-baseborder-top-left-radius: 0.9375rem
border-bottom-left-radius: 0.9375rem		H5、小程序、app-vue
rounded-l-lgborder-top-left-radius: 1.25rem
border-bottom-left-radius: 1.25rem		H5、小程序、app-vue
rounded-l-xlborder-top-left-radius: 1.5625rem
border-bottom-left-radius: 1.5625rem		H5、小程序、app-vue
rounded-l-2xlborder-top-left-radius: 2.5rem
border-bottom-left-radius: 2.5rem		H5、小程序、app-vue
rounded-l-3xlborder-top-left-radius: 3.75rem
border-bottom-left-radius: 3.75rem		H5、小程序、app-vue
rounded-l-4xlborder-top-left-radius: 5rem
border-bottom-left-radius: 5rem		H5、小程序、app-vue
rounded-l-fullborder-top-left-radius: 312.4375rem
border-bottom-left-radius: 312.4375rem		H5、小程序、app-vue

rounded-tl ​

ClassProperties平台兼容性说明
rounded-tl-noneborder-top-left-radius: 0pxH5、小程序、app-vue、app-nvue
rounded-tl-xsborder-top-left-radius: 0.3125remH5、小程序、app-vue、app-nvue
rounded-tl-smborder-top-left-radius: 0.625remH5、小程序、app-vue、app-nvue
rounded-tl-baseborder-top-left-radius: 0.9375remH5、小程序、app-vue、app-nvue
rounded-tl-lgborder-top-left-radius: 1.25remH5、小程序、app-vue、app-nvue
rounded-tl-xlborder-top-left-radius: 1.5625remH5、小程序、app-vue、app-nvue
rounded-tl-2xlborder-top-left-radius: 2.5remH5、小程序、app-vue、app-nvue
rounded-tl-3xlborder-top-left-radius: 3.75remH5、小程序、app-vue、app-nvue
rounded-tl-4xlborder-top-left-radius: 5remH5、小程序、app-vue、app-nvue
rounded-tl-fullborder-top-left-radius: 312.4375remH5、小程序、app-vue、app-nvue

rounded-tr ​

ClassProperties平台兼容性说明
rounded-tr-noneborder-top-right-radius: 0pxH5、小程序、app-vue、app-nvue
rounded-tr-xsborder-top-right-radius: 0.3125remH5、小程序、app-vue、app-nvue
rounded-tr-smborder-top-right-radius: 0.625remH5、小程序、app-vue、app-nvue
rounded-tr-baseborder-top-right-radius: 0.9375remH5、小程序、app-vue、app-nvue
rounded-tr-lgborder-top-right-radius: 1.25remH5、小程序、app-vue、app-nvue
rounded-tr-xlborder-top-right-radius: 1.5625remH5、小程序、app-vue、app-nvue
rounded-tr-2xlborder-top-right-radius: 2.5remH5、小程序、app-vue、app-nvue
rounded-tr-3xlborder-top-right-radius: 3.75remH5、小程序、app-vue、app-nvue
rounded-tr-4xlborder-top-right-radius: 5remH5、小程序、app-vue、app-nvue
rounded-tr-fullborder-top-right-radius: 312.4375remH5、小程序、app-vue、app-nvue

rounded-br ​

ClassProperties平台兼容性说明
rounded-br-noneborder-bottom-right-radius: 0pxH5、小程序、app-vue、app-nvue
rounded-br-xsborder-bottom-right-radius: 0.3125remH5、小程序、app-vue、app-nvue
rounded-br-smborder-bottom-right-radius: 0.625remH5、小程序、app-vue、app-nvue
rounded-br-baseborder-bottom-right-radius: 0.9375remH5、小程序、app-vue、app-nvue
rounded-br-lgborder-bottom-right-radius: 1.25remH5、小程序、app-vue、app-nvue
rounded-br-xlborder-bottom-right-radius: 1.5625remH5、小程序、app-vue、app-nvue
rounded-br-2xlborder-bottom-right-radius: 2.5remH5、小程序、app-vue、app-nvue
rounded-br-3xlborder-bottom-right-radius: 3.75remH5、小程序、app-vue、app-nvue
rounded-br-4xlborder-bottom-right-radius: 5remH5、小程序、app-vue、app-nvue
rounded-br-fullborder-bottom-right-radius: 312.4375remH5、小程序、app-vue、app-nvue

rounded-bl ​

ClassProperties平台兼容性说明
rounded-bl-noneborder-bottom-left-radius: 0pxH5、小程序、app-vue、app-nvue
rounded-bl-xsborder-bottom-left-radius: 0.3125remH5、小程序、app-vue、app-nvue
rounded-bl-smborder-bottom-left-radius: 0.625remH5、小程序、app-vue、app-nvue
rounded-bl-baseborder-bottom-left-radius: 0.9375remH5、小程序、app-vue、app-nvue
rounded-bl-lgborder-bottom-left-radius: 1.25remH5、小程序、app-vue、app-nvue
rounded-bl-xlborder-bottom-left-radius: 1.5625remH5、小程序、app-vue、app-nvue
rounded-bl-2xlborder-bottom-left-radius: 2.5remH5、小程序、app-vue、app-nvue
rounded-bl-3xlborder-bottom-left-radius: 3.75remH5、小程序、app-vue、app-nvue
rounded-bl-4xlborder-bottom-left-radius: 5remH5、小程序、app-vue、app-nvue
rounded-bl-fullborder-bottom-left-radius: 312.4375remH5、小程序、app-vue、app-nvue