uniapp border-radius 向下
时间: 2024-02-19 11:56:29 浏览: 70
CSS3轻松实现圆角效果
在uni-app中,可以使用CSS的border-radius属性来设置元素的圆角。border-radius属性可以接受一个或多个值,用于指定每个角的圆角半径。
如果你想要将一个元素的圆角向下设置,可以使用border-bottom-left-radius和border-bottom-right-radius属性来分别设置左下角和右下角的圆角半径。
以下是一个示例代码:
```html
<template>
<view class="container">
<view class="box"></view>
</view>
</template>
<style>
.container {
width: 200px;
height: 200px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 150px;
height: 150px;
background-color: #ff0000;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}
</style>
```
在上面的代码中,我们创建了一个容器元素(class为container),并在其中放置了一个盒子元素(class为box)。通过设置box元素的border-bottom-left-radius和border-bottom-right-radius属性,我们将盒子元素的左下角和右下角设置为50px的圆角。
你可以根据实际需求调整代码中的样式和数值。
阅读全文