首页 前端知识 css根据内容来自适应大小的圆

css根据内容来自适应大小的圆

2024-06-17 09:06:24 前端知识 前端哥 357 293 我要收藏
<view class="problem-option"><text>A</text></view>

.problem-option {
   background-color: #f4f4f4;
    border-radius:50%;
    display: inline-block;
    text-align: center;
    line-height: 1;
	border: 2rpx solid #888;
	margin-right: 16rpx;
}
//画自适应大小的圆
.problem-option text {
    display: block;
    padding: 50%;
	margin: -2.6em -69% 0; //第一位设置圆的高度,第二位设置字的左右位置
	position: relative;
	top: 1.25em; //设置字的上下位置
	border: 0.8em solid transparent; //第一位设置圆的宽度
    white-space: nowrap;
}

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12452.html
标签
评论
发布的文章

HTML5 新增元素

2024-06-22 10:06:20

【前端】HTML5基础

2024-06-22 10:06:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!