uni-app css 圆角

uni-app CSS 中设置圆角（border-radius）的方法与常规 CSS 类似。为了给元素添加圆角，你可以直接在选择器后面定义 `border-radius` 属性，并指定你需要的四个角落的半径值，或者是用两个值分别表示上左和右下角，或者用单独的值表示所有角的相同大小。

例如：

/* 给所有的 .my-circle 类应用圆角 */
.my-circle {
  border-radius: 10px; /* 全局相同的半径 */
}

/* 或者针对每个角分别设置 */
.my-square-cornered {
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* 如果四边都有圆角 */
.square-rounded {
  border-radius: 5px 5px 5px 5px; 
}

/* 也可以使用简写形式，只提供两个值表示水平方向 */
.rounded-top {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

如果你想要创建响应式的圆角，可以利用媒体查询（media queries），根据设备屏幕尺寸调整圆角值。

需要注意的是，uni-app 在某些特殊情况下可能需要特殊的语法或处理，但基本原理保持一致。如果遇到兼容性问题，可以查阅官方文档或查看相关社区解决方案。

相关问题

uni-app css

uni-app的CSS与Web的CSS基本一致，但是有一些需要注意的地方。以下是一些样式相关的注意事项：
1. 在uni-app中，可以使用rpx作为单位来适配不同的屏幕尺寸。
2. uni-app中的样式可以直接写在vue文件的style标签中，也可以单独写在一个css文件中。
3. uni-app中的样式可以使用sass预处理器，但需要在项目中安装sass。
4. uni-app中的样式可以使用伪类选择器，如:hover、:active等。
5. uni-app中的样式可以使用flex布局来实现页面布局。
6. uni-app中的样式可以使用uni.css文件中提供的一些样式类来快速实现一些常见的样式效果。

以下是一个使用flex布局实现页面布局的例子：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin: 10px;
}

以下是一个使用uni.css文件中提供的样式类实现一些常见样式效果的例子：

<template>
  <div class="uni-bg-red uni-text-white uni-padding uni-radius">
    这是一个带背景色、文字颜色、内边距和圆角的容器
  </div>
</template>

<style>
@import "@/uni.css";
</style>

uni-app实现点赞功能

1. 在pages文件夹下新建一个文件夹，取名为comment（可以自己随便取名），然后新建一个页面，取名为comment。

2. 在comment.vue中添加如下代码：

<template>
  <view class="container">
    <view class="item">
      <view class="avatar"></view>
      <view class="content">
        <view class="username">小明</view>
        <view class="message">这是一条评论</view>
      </view>
      <view class="like" @click="addLike">
        <text :class="{'iconfont':true,'icon-dianzan1':!isLiked,'icon-dianzan-copy':isLiked}"></text>
        <text class="num">{{ likeNum }}</text>
      </view>
    </view>
    <view class="item">
      <view class="avatar"></view>
      <view class="content">
        <view class="username">小红</view>
        <view class="message">这是一条评论</view>
      </view>
      <view class="like" @click="addLike">
        <text :class="{'iconfont':true,'icon-dianzan1':!isLiked,'icon-dianzan-copy':isLiked}"></text>
        <text class="num">{{ likeNum }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      likeNum: 5,
      isLiked: false,
    };
  },
  methods: {
    addLike() {
      if (!this.isLiked) {
        this.likeNum++;
        this.isLiked = true;
      } else {
        this.likeNum--;
        this.isLiked = false;
      }
    },
  },
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  padding: 20rpx;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
}

.avatar {
  width: 60rpx;
  height: 60rpx;
  background-color: #ddd;
  border-radius: 50%;
}

.content {
  flex: 1;
  margin-left: 10rpx;
}

.username {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.message {
  font-size: 28rpx;
}

.like {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  color: #666;
}

.like .num {
  margin-left: 10rpx;
}

.iconfont {
  font-family: 'iconfont' !important;
}
</style>

3. 在static文件夹下新建一个iconfont文件夹，并将下载好的阿里图标库中的iconfont文件夹下的iconfont.ttf文件拷贝到static/iconfont文件夹下。

4. 在App.vue中引入阿里图标库的iconfont.css和uni.css：

<style>
@import url('~@/static/iconfont/iconfont.css');
@import url('~@/static/uni.css');
</style>

5. 在pages.json中添加如下代码：

{
  "path": "pages/comment/comment",
  "style": {
    "navigationBarTitleText": "评论",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black"
  }
}

6. 运行项目即可看到点赞功能实现。

代码解析：

（1）在data中定义likeNum和isLiked，likeNum表示点赞数，isLiked表示当前用户是否已经点赞。初始化时将likeNum设为5（也可以根据需求自行修改），isLiked设为false。

（2）在addLike方法中根据isLiked判断当前用户是否已经点赞，如果没有点赞，点赞数加1，isLiked设为true；如果已经点赞，点赞数减1，isLiked设为false。

（3）在模板中使用:class动态绑定class，根据isLiked的值来给text标签绑定不同的iconfont类，实现点赞和取消点赞的效果。

（4）样式方面，使用了Flex布局，使布局更加美观简洁。添加了圆角、背景色等样式来优化界面。