uniapp中如何通过css实现圆形头像样式

核心代码:

css 复制代码
	#top-card .top image{
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
	}

关键知识点:宽高相同,圆角值为宽高值的一半。

修改之前的效果:

修改之后的效果:

完整代码:

html 复制代码
<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	const src = "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
	const data = ref([])

	onMounted(() => {
		uni.request({
			method: "GET",
			url: 'http://192.168.234.138:8889/zdppy_amfile',
			dataType: "json",
			success: (res) => {
				console.log(res.data);
				data.value = res.data.data.results
			}
		})
	})
</script>

<template>
	<view class="content">
		<view id="top-card">
			<view class="top">
				<image src="../../static/boy1.png"></image>
				<view>测试名字</view>
			</view>
			<view class="bottom">
				<button>查找照片</button>
				<button>亲友团</button>
			</view>
		</view>


		<view class="img-list">
			<image v-for="(v,k) in data" :key="k" :src="`http://192.168.234.138:8889/download/${v.path}`"
				mode="aspectFill" />
		</view>
	</view>
</template>



<style scoped>
	.content {
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 顶部卡片开始 */
	#top-card {
		margin-bottom: 10rpx;
		background-color: aliceblue;
	}

	#top-card .top {
		display: flex;
	}
	
#top-card .top image{
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
	}

	#top-card .bottom {
		display: flex;
	}

	/* 顶部卡片结束 */

	.img-list {
		padding: 10rpx;
		column-count: 2;
		column-gap: 10rpx;
	}
</style>
相关推荐
子兮曰几秒前
🌏浏览器硬件API大全:30个颠覆性技术让你重新认识Web开发
前端·javascript·浏览器
即兴小索奇4 分钟前
Google AI Mode 颠覆传统搜索方式,它是有很大可能的
前端·后端·架构
大虾写代码12 分钟前
nvm和nrm的详细安装配置,从卸载nodejs到安装NVM管理nodejs版本,以及安装nrm管理npm版本
前端·npm·node.js·nvm·nrm
星哥说事13 分钟前
下一代开源 RAG 引擎,让你的 AI 检索与推理能力直接起飞
前端
....49213 分钟前
Vue3 与 AntV X6 节点传参、自动布局及边颜色控制教程
前端·javascript·vue.js
machinecat16 分钟前
Webpack模块联邦 - vue项目嵌套react项目部分功能实践
前端·webpack
今禾17 分钟前
深入浅出:ES6 Modules 与 CommonJS 的爱恨情仇
前端·javascript·面试
前端小白199518 分钟前
面试取经:Vue篇-Vue2响应式原理
前端·vue.js·面试
睡不着先生18 分钟前
CSS `:is()` & `:where()` 实战指南:简化选择器,提升可维护性
css
子兮曰18 分钟前
⭐告别any类型!TypeScript从零到精通的20个实战技巧,让你的代码质量提升300%
前端·javascript·typescript