CSS怎样做出自适应圆形边框？

发布于 2022-09-12 13:52:16 字数 463 浏览 15 评论 0

想做这样一个未处理订单提醒的数字提示想让它始终居中边框是圆形的
现在这样写的话宽度可以随着数字长度自适应但是怎样才能做出自适应圆形边框呢？

<view class="yuncang2">
    2222
</view>

.yuncang2{
  position: absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid red;
  top: 20rpx;
  color: red;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ゞ花落谁相伴 2022-09-19 13:52:16

这个是不是你要的效果？根据文字长度自动变化圆的大小?
css代码

.box{
            display: inline-flex;
            justify-content: center;
            position: absolute;
        }
        .box1{
            padding-top: calc(100% + 20px);
            visibility: hidden;
            min-width: 12px;
            min-height: 12px;

        }
        .box2{
            position: absolute;
            padding-top: calc(100% + 20px);
            width: calc(100% + 20px);
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid red;
            border-radius: 50%;
        }
        .box3{
            position: absolute;
            text-align: center;
            top: 50%;
            transform: translateY(-50%);
        }

html代码

<div class="box">
    <div class="box1">2</div>
    <div class="box2">
        <div class="box3">2</div>
    </div>
</div>

这里保持 box1 和 box3中的文本内容一致即可。

回复收藏 0

画骨成沙 2022-09-19 13:52:16

被楼上带歪了
就是 before 一个圆，设置边框，旋转45度，after 一个圆设置边框，旋转45度

<html>
<head>
<style class="text/css">
.demo {display:inline-block;position:relative;border-radius:50%;box-shadow:0 0 0 1px #F00;overflow:hidden;}
.demo:before {content:attr(data-text);display: block;position: absolute;padding: 0 0.5em;top: 50%;text-align: center;transform: translateY(-50%);}
.demo img {display:block;width:100%;}
.demo .text {margin-top:-1em;padding:0 0.5em;line-height:1em;text-align:center;color:transparent;}
</style>
</head>
<body>
<div class="demo" data-text="233322">
  <img src="https://image-static.segmentfault.com/304/377/3043774994-5fe2d0bbf41c4_articlex">
  <div class="text">233322</div>
</div>
</body>
</html>

原理参考 https://segmentfault.com/q/101000003860279/a-1020000038604608

回复收藏 0

煮茶煮酒煮时光 2022-09-19 13:52:16

文字不换行；
设置固定高度；
border-radius圆角是高度的一半；
搞定

回复收藏 0

时光无声 2022-09-19 13:52:16

这种组件，element-ui 里叫badge。
这个东西在应用里很常见，比如微信、支付宝。这些应用里的 badge 设计都是定高的，这是因为badge显示的通常是次要信息，如果任由它的尺寸变化的话会喧宾夺主。试想一下消息数为 999+ 的时候，它比图标还大，肯定是不太和谐的。
所以，建议采用定高设计，只在一位数的时候显示为正圆，即楼上说的半径为二分之一高度的情况（事实是设一个很大的值就可以了），也可以直接引用带 badge的 UI 库。
坚持要正圆的话，一楼的方案。

回复收藏 0